Created
November 24, 2014 04:03
-
-
Save nlinc1905/66ea5dd294ed28385b7f to your computer and use it in GitHub Desktop.
Spider Taxonomy Radial Tree with d3.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| svg { | |
| display: block; | |
| margin: auto; | |
| } | |
| .node circle { | |
| fill: #BCED91; | |
| stroke: #458B00; | |
| stroke-width: 2.5px; | |
| } | |
| .node { | |
| font-family: verdana, sans-serif; | |
| font-size: 11px; | |
| font-weight: bold; | |
| fill: #6B4226; | |
| } | |
| .link { | |
| fill: none; | |
| stroke: #BFBFBF; | |
| stroke-width: 2px; | |
| } | |
| </style> | |
| <body> | |
| <h3 style="text-align:center">Spider Taxonomy by Order and Family</h3> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var root = {"name" : "Araneae", "children" : [ | |
| {"name" : "Agelenidae", "children" : [ | |
| {"name" : "Hobo Spider"}, | |
| {"name" : "Giant House Spider"}, | |
| {"name" : "Domestic House Spider"}, | |
| {"name" : "Dust Spider"} | |
| ] }, | |
| {"name" : "Araneidae", "children" : [ | |
| {"name" : "Grass Spider"}, | |
| {"name" : "Cross Orb Weaver"}, | |
| {"name" : "Banded Garden Spider"}, | |
| {"name" : "Golden Orb Weaver Spider"}, | |
| {"name" : "Long-Jawed Orb Weaver Spider"} | |
| ] }, | |
| {"name" : "Ctenidae", "children" : [ | |
| {"name" : "Brazilian Wandering Spider"}, | |
| {"name" : "Fishing Spider"} | |
| ] }, | |
| {"name" : "Desidae", "children" : [ | |
| {"name" : "Black House Spider"}, | |
| {"name" : "Brown House Spider"}, | |
| {"name" : "Hollow Twig Spider"} | |
| ] }, | |
| {"name" : "Filistatidae", "children" : [ | |
| {"name" : "Southern House Spider"}, | |
| {"name" : "Arizona Black Hole Spider"} | |
| ] }, | |
| {"name" : "Lycosidae", "children" : [ | |
| {"name" : "Carolina Wolf Spider"}, | |
| {"name" : "Brown Wolf Spider"}, | |
| {"name" : "Texas Wolf Spider"} | |
| ] }, | |
| {"name" : "Pholcidae", "children": [ | |
| {"name" : "Cellar Spider"}, | |
| {"name" : "Yellow Sac Spider"}, | |
| {"name" : "Ground Spider"}, | |
| {"name" : "Banded Garden Spider"} | |
| ] }, | |
| {"name" : "Salticidae", "children": [ | |
| {"name" : "Bold Jumping Spider"}, | |
| {"name" : "Zebra Jumping Spider"}, | |
| {"name" : "Gray Wall Jumping Spider"} | |
| ] }, | |
| {"name" : "Sicariidae", "children": [ | |
| {"name" : "Brown Spider"}, | |
| {"name" : "Brown Recluse Spider"} | |
| ] }, | |
| {"name" : "Theraphosidae", "children": [ | |
| {"name" : "King Baboon Spider"}, | |
| {"name" : "Bird Eating Spider"}, | |
| {"name" : "Pinktoe Tarantula Spider"}, | |
| {"name" : "Indian Ornamental Tree Spider"} | |
| ] }, | |
| {"name" : "Theridiidae", "children": [ | |
| {"name" : "Black Widow Spider"}, | |
| {"name" : "Brown Widow Spider"}, | |
| {"name" : "Red Widow Spider"} | |
| ] } | |
| ]}; | |
| var diameter = 760; | |
| var tree = d3.layout.tree() | |
| .size([360, diameter / 2 - 190]) | |
| .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; }); | |
| var diagonal = d3.svg.diagonal.radial() | |
| .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", diameter + 20) | |
| .attr("height", diameter - 40) | |
| .append("g") | |
| .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")"); | |
| var nodes = tree.nodes(root), | |
| links = tree.links(nodes); | |
| var link = svg.selectAll(".link") | |
| .data(links) | |
| .enter().append("path") | |
| .attr("class", "link") | |
| .attr("d", diagonal); | |
| var node = svg.selectAll(".node") | |
| .data(nodes) | |
| .enter().append("g") | |
| .attr("class", "node") | |
| .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) | |
| node.append("circle") | |
| .attr("r", 5); | |
| node.append("text") | |
| .attr("dy", ".31em") | |
| .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; }) | |
| .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; }) | |
| .text(function(d) { return d.name; }); | |
| d3.select(self.frameElement).style("height", diameter - 150 + "px"); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment