JSFiddle - React, Tailwind, and code Playground

by Andrew Cole

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<body>
<svg class="svg"></svg>
</body>

CSS

.node {
        stroke: #fff;
        stroke-width: 1.5px;
    }
    .link {
        stroke: #999;
        stroke-opacity: .6;
    }

JavaScript

var graphData = [{ index: 1, parent:"" , color: "RED", level: "1", business: "Amazon", hover: "Hovering", link:"link"},
 { index: 2, parent:"1" , color: "RED", level: "2", business: "Amazon", hover: "Hovering", link:"link"},
 { index: 3, parent:"1" , color: "RED", level: "2", business: "Amazon", hover: "Hovering", link:"link"},
 { index: 4, parent:"1" , color: "RED", level: "2", business: "Amazon", hover: "Hovering", link:"link"},
 { index: 5, parent:"1" , color: "RED", level: "2", business: "Amazon", hover: "Hovering", link:"link"}]
 
 var height = 500,
     width = 500;
                 
     var graphLinks = [];

    $.each(graphData, function(i, d) {
                if (d.parent != "" && d.parent !== undefined) {
                    graphLinks.push({source: parseInt(d.parent , 10) - 1 , target: parseInt(d.index , 10) - 1, value: parseInt(d.level , 10)});
                }
                
            });

    var color = d3.scale.category20();

        var svg = d3.select('.svg')
                .attr('width', width)
                .attr('height', height);

        var force = d3.layout.force()
                .charge(-120)
                .linkDistance(30)
                .size([width, height]);

        force.nodes(graphData)
                .links(graphLinks)
                .start();

        var link = svg.selectAll('.link')
                .data(graphLinks)
                .enter().append('line')
                .attr('class', 'link')
                .style('stroke-width', function (d) {
                    return Math.sqrt(d.value);
                });

        var node = svg.selectAll('.node')
                .data(graphData)
                .enter().append('circle')
                .attr('class', 'node')
                .attr('r', 8)
                .style('fill', function (d) {
                    return color(d.level);
                })
                .call(force.drag);

        //Now we are giving the SVGs co-ordinates - the force layout is...