D3 Examples - Simple Tree (d3 v4; CSV; 63 Lines)

Simple Tree (d3 v4; CSV; 63 Lines)

This is the simplest horizontal tree diagram I could create. Let me know if you think I can make it tighter.

Build notes:

It pulls data from a csv file. It uses d3.stratify() to reform links into a hierarchy.

To differentiate between local variables and framework objects, I prefix variables with lowercase 'v'.

xxxxxxxxxx
 
<!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);
      console.log(v)
        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();
​
      console.log(vLinks)
        // 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>
​
    