This is a simple d3.js tree diagram with dynamic styling added to the nodes and links as used as an example in the book D3 Tips and Tricks.
It is derived from the Mike Bostock Collapsible tree example but it is a VERY cut down version without the ability to update (collapse).
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Collapsible Tree Example</title> | |
| <style> | |
| .node circle { | |
| fill: #fff; | |
| stroke: black; | |
| stroke-width: 4px; | |
| } | |
| .node text { font: 12px sans-serif; } | |
| .link { | |
| fill: none; | |
| stroke: #ccc; | |
| stroke-width: 4px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- load the d3.js library --> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var treeData = [ | |
| { | |
| "name": "Z1-A1", | |
| "parent": "null", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(174,173,137)", | |
| "children": [ | |
| { | |
| "name": "A1", | |
| "parent": "Z1-A1", | |
| "value": 40, | |
| "type": "black", | |
| "level": "rgb(174,173,137)", | |
| "children": [ | |
| { | |
| "name": "A1-B1", | |
| "parent": "A1", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(166,54,3)", | |
| "children": [ | |
| { | |
| "name": "B1", | |
| "parent": "A1-B1", | |
| "value": 33, | |
| "type": "black", | |
| "level": "rgb(166,54,3)", | |
| "children": [ | |
| { | |
| "name": "B1-C1", | |
| "parent": "B1", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(253,174,107)", | |
| "children": [ | |
| { | |
| "name": "C1", | |
| "parent": "B1-C1", | |
| "value": 26, | |
| "type": "black", | |
| "level": "rgb(253,174,107)", | |
| "children": [ | |
| { | |
| "name": "DX0", | |
| "parent": "C1", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(200,200,200)" | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "B1-C2", | |
| "parent": "B1", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(230,85,13)", | |
| "children": [ | |
| { | |
| "name": "C2", | |
| "parent": "B1-C2", | |
| "value": 17, | |
| "type": "black", | |
| "level": "rgb(230,85,13)", | |
| "children": [ | |
| { | |
| "name": "C2-D1", | |
| "parent": "C2", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(253,208,162)", | |
| "children": [ | |
| { | |
| "name": "D1", | |
| "parent": "C2-D1", | |
| "value": 12, | |
| "type": "black", | |
| "level": "rgb(253,208,162)", | |
| "children": [ | |
| { | |
| "name": "EX0", | |
| "parent": "D1", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(200,200,200)" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "B1-C3", | |
| "parent": "B1", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(253,141,60)", | |
| "children": [ | |
| { | |
| "name": "C3", | |
| "parent": "B1-C3", | |
| "value": 15, | |
| "type": "black", | |
| "level": "rgb(253,141,60)", | |
| "children": [ | |
| { | |
| "name": "DY0", | |
| "parent": "C3", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(200,200,200)" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "A1-B2", | |
| "parent": "A1", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(165,15,21)", | |
| "children": [ | |
| { | |
| "name": "B2", | |
| "parent": "A1-B2", | |
| "value": 39, | |
| "type": "black", | |
| "level": "rgb(165,15,21)", | |
| "children": [ | |
| { | |
| "name": "B2-C4", | |
| "parent": "B2", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(251,106,74)", | |
| "children": [ | |
| { | |
| "name": "C4", | |
| "parent": "B2-C4", | |
| "value": 21, | |
| "type": "black", | |
| "level": "rgb(251,106,74)", | |
| "children": [ | |
| { | |
| "name": "DZ0", | |
| "parent": "C4", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(200,200,200)" | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "B2-C5", | |
| "parent": "B2", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(222,45,38)", | |
| "children": [ | |
| { | |
| "name": "C5", | |
| "parent": "B2-C5", | |
| "value": 37, | |
| "type": "black", | |
| "level": "rgb(222,45,38)", | |
| "children": [ | |
| { | |
| "name": "C5-D2", | |
| "parent": "C5", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(8,69,148)", | |
| "children": [ | |
| { | |
| "name": "D2", | |
| "parent": "C5-D2", | |
| "value": 36, | |
| "type": "black", | |
| "level": "rgb(8,69,148)", | |
| "children": [ | |
| { | |
| "name": "D2-E1", | |
| "parent": "D2", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(33,113,181)", | |
| "children": [ | |
| { | |
| "name": "E1", | |
| "parent": "D2-E1", | |
| "value": 34, | |
| "type": "black", | |
| "level": "rgb(33,113,181)", | |
| "children": [ | |
| { | |
| "name": "E1-F1", | |
| "parent": "E1", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(66,146,198)", | |
| "children": [ | |
| { | |
| "name": "F1", | |
| "parent": "E1-F1", | |
| "value": 20, | |
| "type": "black", | |
| "level": "rgb(66,146,198)", | |
| "children": [ | |
| { | |
| "name": "F1-G1", | |
| "parent": "F1", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(107,174,214)", | |
| "children": [ | |
| { | |
| "name": "G1", | |
| "parent": "F1-G1", | |
| "value": 18, | |
| "type": "black", | |
| "level": "rgb(107,174,214)", | |
| "children": [ | |
| { | |
| "name": "G1-H1", | |
| "parent": "G1", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(158,202,225)", | |
| "children": [ | |
| { | |
| "name": "H1", | |
| "parent": "G1-H1", | |
| "value": 8, | |
| "type": "black", | |
| "level": "rgb(158,202,225)", | |
| "children": [ | |
| { | |
| "name": "IX0", | |
| "parent": "H1", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(200,200,200)" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "E1-F2", | |
| "parent": "E1", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(198,219,239)", | |
| "children": [ | |
| { | |
| "name": "F2", | |
| "parent": "E1-F2", | |
| "value": 5, | |
| "type": "black", | |
| "level": "rgb(198,219,239)", | |
| "children": [ | |
| { | |
| "name": "GX0", | |
| "parent": "F2", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(200,200,200)" | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "E1-F3", | |
| "parent": "E1", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(0,109,44)", | |
| "children": [ | |
| { | |
| "name": "F3", | |
| "parent": "E1-F3", | |
| "value": 30, | |
| "type": "black", | |
| "level": "rgb(0,109,44)", | |
| "children": [ | |
| { | |
| "name": "F3-G2", | |
| "parent": "F3", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(49,163,84)", | |
| "children": [ | |
| { | |
| "name": "G2", | |
| "parent": "F3-G2", | |
| "value": 27, | |
| "type": "black", | |
| "level": "rgb(49,163,84)", | |
| "children": [ | |
| { | |
| "name": "G2-H2", | |
| "parent": "G2", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(116,196,118)", | |
| "children": [ | |
| { | |
| "name": "H2", | |
| "parent": "G2-H2", | |
| "value": 23, | |
| "type": "black", | |
| "level": "rgb(116,196,118)", | |
| "children": [ | |
| { | |
| "name": "I1", | |
| "parent": "H2", | |
| "value": 3, | |
| "type": "black", | |
| "level": "rgb(199,233,192)", | |
| "children": [ | |
| { | |
| "name": "JX0", | |
| "parent": "I1", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(200,200,200)" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "F3-G3", | |
| "parent": "F3", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(161,217,155)", | |
| "children": [ | |
| { | |
| "name": "G3", | |
| "parent": "F3-G3", | |
| "value": 2, | |
| "type": "black", | |
| "level": "rgb(161,217,155)", | |
| "children": [ | |
| { | |
| "name": "FX0", | |
| "parent": "G3", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(200,200,200)" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "E1-F4", | |
| "parent": "E1", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(84,39,143)", | |
| "children": [ | |
| { | |
| "name": "F4", | |
| "parent": "E1-F4", | |
| "value": 31, | |
| "type": "black", | |
| "level": "rgb(84,39,143)", | |
| "children": [ | |
| { | |
| "name": "F4-G4", | |
| "parent": "F4", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(117,107,177)", | |
| "children": [ | |
| { | |
| "name": "G4", | |
| "parent": "F4-G4", | |
| "value": 24, | |
| "type": "black", | |
| "level": "rgb(117,107,177)", | |
| "children": [ | |
| { | |
| "name": "FY0", | |
| "parent": "G4", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(200,200,200)" | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "F4-G5", | |
| "parent": "F4", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(158,154,200)", | |
| "children": [ | |
| { | |
| "name": "G5", | |
| "parent": "F4-G5", | |
| "value": 9, | |
| "type": "black", | |
| "level": "rgb(158,154,200)", | |
| "children": [ | |
| { | |
| "name": "FZ0", | |
| "parent": "G5", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(200,200,200)" | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "F4-G6", | |
| "parent": "F4", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(203,201,226)", | |
| "children": [ | |
| { | |
| "name": "G6", | |
| "parent": "F4-G6", | |
| "value": 6, | |
| "type": "black", | |
| "level": "rgb(203,201,226)", | |
| "children": [ | |
| { | |
| "name": "FA0", | |
| "parent": "G6", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(200,200,200)" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "D2-E2", | |
| "parent": "D2", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(190,187,36)", | |
| "children": [ | |
| { | |
| "name": "E2", | |
| "parent": "D2-E2", | |
| "value": 28, | |
| "type": "black", | |
| "level": "rgb(190,187,36)", | |
| "children": [ | |
| { | |
| "name": "E2-F5", | |
| "parent": "E2", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(254,250,49)", | |
| "children": [ | |
| { | |
| "name": "F5", | |
| "parent": "E2-F5", | |
| "value": 14, | |
| "type": "black", | |
| "level": "rgb(254,250,49)", | |
| "children": [ | |
| { | |
| "name": "GY0", | |
| "parent": "F5", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(200,200,200)" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "C5-D3", | |
| "parent": "C5", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(252,174,145)", | |
| "children": [ | |
| { | |
| "name": "D3", | |
| "parent": "C5-D3", | |
| "value": 11, | |
| "type": "black", | |
| "level": "rgb(252,174,145)", | |
| "children": [ | |
| { | |
| "name": "EY0", | |
| "parent": "D3", | |
| "value": 1, | |
| "type": "black", | |
| "level": "rgb(200,200,200)" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ]; | |
| // ************** Generate the tree diagram ***************** | |
| var margin = {top: 144, right: 48, bottom: 144, left: 48}, | |
| width = 1632 - margin.right - margin.left, | |
| height = 816 - margin.top - margin.bottom; | |
| var i = 0; | |
| var tree = d3.layout.tree() | |
| .size([height, width]); | |
| var diagonal = d3.svg.diagonal() | |
| .projection(function(d) { return [d.y, d.x]; }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.right + margin.left) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| root = treeData[0]; | |
| update(root); | |
| function update(source) { | |
| // Compute the new tree layout. | |
| var nodes = tree.nodes(root).reverse(), | |
| links = tree.links(nodes); | |
| // Normalize for fixed-depth. | |
| nodes.forEach(function(d) { d.y = d.depth * 89; }); | |
| // Declare the nodes… | |
| var node = svg.selectAll("g.node") | |
| .data(nodes, function(d) { return d.id || (d.id = ++i); }); | |
| // Enter the nodes. | |
| var nodeEnter = node.enter().append("g") | |
| .attr("class", "node") | |
| .attr("transform", function(d) { | |
| return "translate(" + d.y + "," + d.x + ")"; }); | |
| nodeEnter.append("circle") | |
| .attr("r", function(d) { return d.value; }) | |
| .style("stroke", function(d) { return d.type; }) | |
| .style("fill", function(d) { return d.level; }); | |
| nodeEnter.append("text") | |
| .attr("x", function(d) { | |
| return d.children || d._children ? | |
| (d.value + 4) * -1 : d.value + 4 }) | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", function(d) { | |
| return d.children || d._children ? "end" : "start"; }) | |
| .text(function(d) { return d.name; }) | |
| .style("fill-opacity", 1); | |
| // Declare the links… | |
| var link = svg.selectAll("path.link") | |
| .data(links, function(d) { return d.target.id; }); | |
| // Enter the links. | |
| link.enter().insert("path", "g") | |
| .attr("class", "link") | |
| .style("stroke", function(d) { return d.target.level; }) | |
| .attr("d", diagonal); | |
| } | |
| </script> | |
| </body> | |
| </html> |
