Skip to content

Commit 62b1ee1

Browse files
mooreryanmooreryan
committed
Update readme and add examples
1 parent 2a6962e commit 62b1ee1

File tree

6 files changed

+117
-2
lines changed

6 files changed

+117
-2
lines changed

‎README.md

+54-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
jsPhyloSVG
2-
==========
2+
----------
33

44
jsPhyloSVG is an open-source javascript library specifically built for rendering highly-extensible, customizable phylogenetic trees. jsPhyloSVG can render complex trees, yet offers a simple method to do so. It leverages the recent XML schema definition specified for phylogenetic trees, phyloXML.
55

@@ -11,6 +11,58 @@ Future
1111
======
1212
I still think it is useful and has potential in other projects as a starting point. So, I am placing the old v1.55 code here, as there was no original public source-managed repository of their code and I couldn't find anyone else with a submission. Hopefully, as the code was released under GPL that is acceptable, and maybe some others will fork and add to the features, I am happy to receive pull requests etc. I intend to use it for a few demo projects of my own and will probably put them in a different branch...
1313

14+
### jsPhyloSVG-Color ###
15+
16+
17+
The PhyloXML standard allows adding color to branches and node names
18+
in the XML. The original `jsphylosvg.js` code ignores the color
19+
tags. `jsphylosvg-color.js` automatically colors branches and nodes
20+
according to the PhyloXML standard.
21+
22+
#### Coloring branches ####
23+
24+
Add the `color` tag like this:
25+
26+
```xml
27+
<clade>
28+
<name>a</name>
29+
<branch_length>1.8</branch_length>
30+
<color>
31+
<red>255</red>
32+
<green>0</green>
33+
<blue>0</blue>
34+
</color>
35+
</clade>
36+
```
37+
38+
and the branch connecting to label `a` will be colored red.
39+
40+
#### A larger example ####
41+
42+
```xml
43+
<clade>
44+
<branch_length>2.0</branch_length>
45+
<confidence type="bootstrap">75</confidence>
46+
<property ref="style:font_color" datatype="xsd:token" applies_to="node">#ff00ff</property> <!-- color the bootstrap label -->
47+
<color> <!-- to color the branch leading to the bootstrap label -->
48+
<red>153</red>
49+
<green>255</green>
50+
<blue>153</blue>
51+
</color>
52+
<clade>
53+
<name>b</name>
54+
<branch_length>1.3</branch_length>
55+
<property ref="style:font_color" datatype="xsd:token" applies_to="node">#ff9933</property> <!-- color branch label 'b' -->
56+
</clade>
57+
</clade>
58+
```
59+
60+
##### Running this example #####
61+
62+
See `examples/color` for a working examle. `cd` into that directory
63+
and run `python -m SimpleHTTPServer` to set up a server. Then navigate
64+
to the `color.html` page in Firefox (Chrome doesn't want to render the
65+
javascript) and you can see this in action.
1466

1567
Website
1668
=======
@@ -26,7 +78,7 @@ Copyright (c) Samuel Smits, [email protected]
2678
All rights reserved.
2779

2880
If you use this software, please cite:
29-
Smits SA, Ouverney CC, 2010. jsPhyloSVG: A Javascript Library for Visualizing Interactive and Vector-Based Phylogenetic Trees on the Web.
81+
Smits SA, Ouverney CC, 2010. jsPhyloSVG: A Javascript Library for Visualizing Interactive and Vector-Based Phylogenetic Trees on the Web.
3082
PLoS ONE 5(8): e12267. doi:10.1371/journal.pone.0012267
3183

3284

‎examples/color/color.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<html>
2+
<head>
3+
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
4+
<script type="text/javascript" src="../../raphael-min.js" ></script>
5+
<script type="text/javascript" src="../../jsphylosvg-color-min.js"> </script>
6+
<script type="text/javascript" src="js/color.js"> </script>
7+
</head>
8+
<body>
9+
<div id="svgCanvas"></div>
10+
</body>
11+
</html>

‎examples/color/color.png

9.65 KB
Loading

‎examples/color/js/color.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
$(document).ready(function(){
2+
$.get("trees/color.xml", function(data) {
3+
var dataObject = { xml: data, fileSource: true };
4+
phylocanvas = new Smits.PhyloCanvas(
5+
dataObject, 'svgCanvas', 500, 200
6+
);
7+
});
8+
});

‎examples/color/js/jquery-1.12.4.min.js

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/color/trees/color.xml

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<phyloxml xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.phyloxml.org http://www.phyloxml.org/1.10/phyloxml.xsd" xmlns="http://www.phyloxml.org">
3+
<phylogeny rooted="false" rerootable="true">
4+
<clade>
5+
<clade>
6+
<name>a</name>
7+
<branch_length>1.8</branch_length>
8+
<color>
9+
<red>255</red>
10+
<green>0</green>
11+
<blue>0</blue>
12+
</color>
13+
</clade>
14+
<clade>
15+
<branch_length>2.0</branch_length>
16+
<confidence type="bootstrap">75</confidence>
17+
<property ref="style:font_color" datatype="xsd:token" applies_to="node">#ff00ff</property> <!-- color the bootstrap label -->
18+
<color> <!-- to color the branch leading to the bootstrap label -->
19+
<red>153</red>
20+
<green>255</green>
21+
<blue>153</blue>
22+
</color>
23+
<clade>
24+
<name>b</name>
25+
<branch_length>1.3</branch_length>
26+
<property ref="style:font_color" datatype="xsd:token" applies_to="node">#ff9933</property> <!-- color branch label 'b' -->
27+
</clade>
28+
<clade>
29+
<name>c</name>
30+
<branch_length>0.4</branch_length>
31+
</clade>
32+
</clade>
33+
<clade>
34+
<name>d</name>
35+
<branch_length>1.5</branch_length>
36+
</clade>
37+
</clade>
38+
</phylogeny>
39+
</phyloxml>

0 commit comments

Comments
 (0)