Tree visualization of density decomposition.
You can view a rendered version of this gist at bl.ocks.org.
The function requires multiple trees as entries of an array. For each node, the data contains the corresponding parent. Root nodes have a parent of null (or an empty array?!). "Flat" data first gets transformed to hierarchical graph data, where each node has an array of all of its children.
| function treeChart() { | |
| var width = 200; | |
| var height = 500; | |
| var vSpace = 100; | |
| var nodeRadius = 12; | |
| function treeChartInner(selection) { | |
| selection.each(function(data){ | |
| // define margins | |
| var margin = {top: 20, right: 10, bottom: 30, left: 10}; | |
| // graphics size without axis | |
| var innerWidth = width - margin.left - margin.right; | |
| var innerHeight = height - margin.top - margin.bottom; | |
| var svg = d3.select(this).append("svg") | |
| .attr("width", innerWidth + margin.left + margin.right) | |
| .attr("height", innerHeight + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| // process data | |
| var dataMap = data.reduce(function(map, node) { | |
| map[node.name] = node; | |
| return map; | |
| }, {}); | |
| var treeData = []; | |
| data.forEach(function(node) { | |
| // add to parent | |
| var parent = dataMap[node.parent]; | |
| if (parent) { | |
| // create child array if it doesn't exist | |
| (parent.copulaLink || (parent.copulaLink = [])) | |
| // add node to child array | |
| .push(node); | |
| } else { | |
| // parent is null or missing | |
| treeData.push(node); | |
| } | |
| }); | |
| // | |
| var tree = d3.layout.tree() | |
| .sort(function comparator(a, b) { | |
| return +a.name - +b.name; | |
| }) | |
| .size([innerWidth, innerHeight]) | |
| .children(function(d) | |
| { | |
| return (!d.copulaLink || d.copulaLink.length === 0) ? null : d.copulaLink; | |
| }); | |
| var nodes = tree.nodes(treeData[0]); | |
| var links = tree.links(nodes); | |
| nodes.forEach(function(d) { d.y = d.depth * vSpace; }); | |
| var link = d3.svg.diagonal() | |
| .projection(function(d) | |
| { | |
| return [d.x, d.y]; | |
| }); | |
| svg.selectAll("path.link") | |
| .data(links) | |
| .enter() | |
| .append("svg:path") | |
| .attr("class", "link") | |
| .attr("fill", "none") | |
| .attr("stroke", "#ccc") | |
| .attr("stroke-width", "2px") | |
| .attr("d", link); | |
| var nodeGroup = svg.selectAll("g.node") | |
| .data(nodes) | |
| .enter() | |
| .append("svg:g") | |
| .attr("class", "node") | |
| .attr("transform", function(d) | |
| { | |
| return "translate(" + d.x + "," + d.y + ")"; | |
| }); | |
| nodeGroup.append("svg:circle") | |
| .attr("class", "node-dot") | |
| .attr("fill", "#fff") | |
| .attr("stroke", "steelblue") | |
| .attr("stroke-width", "3px") | |
| .attr("r", nodeRadius) | |
| nodeGroup.append("svg:text") | |
| .attr("text-anchor", "middle") | |
| .attr("alignment-baseline", "central") | |
| .text(function(d) { return d.name; }) | |
| .style("font-size", "14px") | |
| .style("font", "sans-serif"); | |
| }) | |
| } | |
| treeChartInner.width = function(value) { | |
| if (!arguments.length) return width; | |
| width = value; | |
| return treeChartInner; | |
| }; | |
| treeChartInner.height = function(value) { | |
| if (!arguments.length) return height; | |
| height = value; | |
| return treeChartInner; | |
| }; | |
| treeChartInner.vSpace = function(value) { | |
| if (!arguments.length) return vSpace; | |
| vSpace = value; | |
| return treeChartInner; | |
| }; | |
| treeChartInner.nodeRadius = function(value) { | |
| if (!arguments.length) return nodeRadius; | |
| nodeRadius = value; | |
| return treeChartInner; | |
| }; | |
| return treeChartInner; | |
| } |
| [ | |
| [ | |
| { "name": "3", "parent": "null" }, | |
| { "name": "2", "parent": "3" }, | |
| { "name": "1", "parent": "2" }, | |
| { "name": "5", "parent": "2" }, | |
| { "name": "6", "parent": "3" }, | |
| { "name": "4", "parent": "3" }, | |
| { "name": "7", "parent": "6" }, | |
| { "name": "8", "parent": "7" }, | |
| { "name": "9", "parent": "8" }, | |
| { "name": "10", "parent": "4" }, | |
| { "name": "11", "parent": "5" } | |
| ], | |
| [ | |
| { "name": "3", "parent": "null" }, | |
| { "name": "2", "parent": "3" }, | |
| { "name": "1", "parent": "2" }, | |
| { "name": "5", "parent": "2" }, | |
| { "name": "6", "parent": "3" }, | |
| { "name": "4", "parent": "3" }, | |
| { "name": "7", "parent": "6" }, | |
| { "name": "8", "parent": "7" }, | |
| { "name": "9", "parent": "1" }, | |
| { "name": "10", "parent": "1" }, | |
| { "name": "11", "parent": "1" } | |
| ], | |
| [ | |
| { "name": "3", "parent": "1" }, | |
| { "name": "2", "parent": "3" }, | |
| { "name": "1", "parent": "0" }, | |
| { "name": "5", "parent": "2" }, | |
| { "name": "6", "parent": "3" }, | |
| { "name": "4", "parent": "3" }, | |
| { "name": "7", "parent": "6" }, | |
| { "name": "8", "parent": "1" }, | |
| { "name": "9", "parent": "6" }, | |
| { "name": "10", "parent": "5" }, | |
| { "name": "11", "parent": "5" } | |
| ] | |
| ] |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 16px sans-serif; | |
| } | |
| .node circle { | |
| fill: #fff; | |
| stroke: steelblue; | |
| stroke-width: 3px; | |
| } | |
| .node text { font: 16px sans-serif; } | |
| .link { | |
| fill: none; | |
| stroke: #ccc; | |
| stroke-width: 2px; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="assembly_code.js"></script> | |
| <script> | |
| var actualChart = treeChart(); | |
| var treeArray = d3.json("dummyData.json", function(error, json) | |
| { | |
| if (error) return console.warn(error); | |
| treeArray = json; | |
| d3.select("body") | |
| .selectAll(".singleTree") | |
| .data(treeArray) | |
| .enter() | |
| .append("chart") | |
| .attr("class", "singleTree") | |
| .call(actualChart) | |
| }); | |
| </script> | |
| </body> | |
| </html> |
