D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
abrahamdu
Full window
Github gist
Structure of D3 TSV Module
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> svg { width: 100%; height: 100%; position: center; } .link { fill: none; stroke: #ccc; stroke-width: 2px; } .text-anchor { font-size: 22px; font-weight: bold; } </style> </head> <svg width="900" height="580"></svg> <body> <script> var tsv_tree = { "name": "d3.dsvFormat", "value": "16", "level": "steelblue", "children": [ { "name": "csv", "value": "12", "level": "red", "children": [ { "name": "parse", "value": "10", "level": "maroon", "children": [ { "name": "d3.csvParse", "value": "8", "level": "maroon" }, { "name": "d3.csvParseRows", "value": "8", "level": "maroon" } ] }, { "name": "format", "value": "10", "level": "pink", "children": [ { "name": "d3.csvFormat", "value": "8", "level": "pink" }, { "name": "d3.csvFormatRows", "value": "8", "level": "pink" } ] } ] }, { "name": "tsv", "value": "12", "level": "gold", "children": [ { "name": "parse", "value": "10", "level": "orchid", "children": [ { "name": "d3.tsvParse", "value": "8", "level": "orchid" }, { "name": "d3.tsvParseRows", "value": "8", "level": "orchid" } ] }, { "name": "format", "value": "10", "level": "lime", "children": [ { "name": "d3.tsvFormat", "value": "8", "level": "lime" }, { "name": "d3.tsvFormatRows", "value": "8", "level": "lime" } ] } ] } ] }; var margin = {top: 30, right: 80, bottom: 30, left: 40}; var width = 900 - margin.left - margin.right; var height = 900 - margin.top - margin.bottom; var tree = d3.tree() .size([height - 300, width - 200]); var nodes = d3.hierarchy(tsv_tree, function(d) { return d.children; }); nodes = tree(nodes); var g = d3.select("svg") .append("g") .attr("transform", "translate(" + margin.left*4 + "," + margin.top + ")"); var link = g.selectAll(".link") .data(nodes.descendants().slice(1)) .enter().append("path") .attr("class", "link") .style("stroke", function(d) { return d.data.level; }) .attr("d", function(d) { return "M" + d.y + "," + d.x + "C" + (d.y + d.parent.y) / 2 + "," + d.x + " " + (d.y + d.parent.y) / 2 + "," + d.parent.x + " " + d.parent.y + "," + d.parent.x; }); var node = g.selectAll(".node") .data(nodes.descendants()) .enter().append("g") .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf");}) .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); node.append("circle") .attr("r", function(d) { return d.data.value; }) .style("fill", function(d) { return d.data.level; }); node.append("text") .attr("dy", 3) .attr("x", function(d) { return d.children ? (d.data.value ) * -1 : d.data.value}) .text(function(d) { return d.data.name; }) .style("text-anchor", function(d) { return d.children ? "end" : "start"; }) .style("font-size", "22px") .attr("fill", "silver"); </script> </body>
https://d3js.org/d3.v4.min.js