Simple Tree (d3 v4; CSV; 63 Lines) by jermspeaks

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)

index.html

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

data.csv

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