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'.

From https://bl.ocks.org/denjn5/4bdda16ab6338772a7882ec2f5f2a9c7

forked from denjn5's block: Simple Tree (d3 v4; CSV; 63 Lines)

<!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>

path {
        fill: none;
        stroke: #05668D;
        opacity: 0.6;
        stroke-width: 2px;
    }
</style>

// 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>

https://d3js.org/d3.v4.min.js