| license: gpl-3.0 | |
| height: 200 | |
| border: no |
This is the simplest horizontal tree diagram I could create. Let me know if you think I can make it tighter.
Build notes:
From https://bl.ocks.org/denjn5/4bdda16ab6338772a7882ec2f5f2a9c7
| id,parentId,size | |
| cars, | |
| owned,cars | |
| traded,cars | |
| learned,cars | |
| pilot,owned,40 | |
| 325ci,owned,40 | |
| accord,owned,20 | |
| chevette,traded,10 | |
| odyssey,learned,20 | |
| maxima,learned,10 |
| <!DOCTYPE html> | |
| <meta charset='utf-8'> | |
| <head> | |
| <title>Simple Tree (d3 v4; CSV; 63 Lines)</title> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| </head> | |
| <style> | |
| circle { | |
| stroke: #05668D; | |
| fill: white; | |
| opacity: 0.6; | |
| stroke-width: 2px; | |
| } | |
| path { | |
| fill: none; | |
| stroke: #05668D; | |
| opacity: 0.6; | |
| stroke-width: 2px; | |
| } | |
| </style> | |
| <svg> | |
| <g></g> | |
| </svg> | |
| <script> | |
| var vWidth = 300; | |
| var vHeight = 200; | |
| // Prepare our physical space | |
| var g = d3.select('svg').attr('width', vWidth).attr('height', vHeight) | |
| .select('g').attr('transform', 'translate(20,20)'); | |
| // Get the data from our CSV file | |
| d3.csv('data.csv', function(error, vCsvData) { | |
| if (error) throw error; | |
| vData = d3.stratify()(vCsvData); | |
| drawViz(vData); | |
| }); | |
| function drawViz(vData) { | |
| // Declare d3 layout | |
| var vLayout = d3.tree().size([vHeight * 0.9, vWidth * 0.8]); | |
| // Layout + Data | |
| var vRoot = d3.hierarchy(vData); | |
| var vNodes = vRoot.descendants(); | |
| var vLinks = vLayout(vRoot).links(); | |
| // Draw on screen | |
| g.selectAll('path').data(vLinks).enter().append('path') | |
| .attr('d', d3.linkHorizontal() | |
| .x(function(d) { return d.y; }) | |
| .y(function(d) { return d.x; })); | |
| g.selectAll('circle').data(vNodes).enter().append('circle') | |
| .style('r', 10) | |
| .attr('transform', function (d) { return 'translate(' + d.y + ',' + d.x + ')'; }); | |
| } | |
| </script> |
