JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<md-content flex>
    <div id="mdView" style="min-width: 280px;
  min-height: 200px;">
    </div>
</md-content>
<script>
    var width = 460,
        height = 300;
    var color = d3.scale.category20();
    var radius = d3.scale.sqrt()
        .range([0, 3]);
    var svg = d3.select("#mdView").append("svg")
        .attr("viewBox", "0 0 460 300 ")
        .attr("width", '100%')
        .attr("height", '100%');

    var force = d3.layout.force()
        .size([width, height])
        .charge(-300)
        .linkDistance(function(d) {
            return radius(d.source.size) + radius(d.target.size) + 20;
        });
       d3.json("https://api.myjson.com/bins/2j3b4", function(error, graph) {
        if (error) throw error;
        force
            .nodes(graph.nodes)
            .links(graph.links)
            .on("tick", tick)
            .start();

        var tooltip = d3.select("#chart")
        .append("div")
        .style("position", "absolute")
        .style("z-index", "10")
        .style("visibility", "hidden");

        tooltip.append("div")
        .attr("id", "tt-name")
        .text("simple");

        var link = svg.selectAll(".link")
            .data(graph.links)
            .enter().append("g")
            .attr("class", "link");

        link.append("line")
            .style("stroke-width", function(d) {
                return (d.bond * 2 - 1) * 2 + "px";
            });

        link.filter(function(d) {
                return d.bond > 1;
            }).append("line")
            .attr("class", "separator");

        var node = svg.selectAll(".node")
            .data(graph.nodes)
            .enter().append("g")
            .attr("class", "node")
            .call(force.drag);

        node.append("circle")
            .attr("r", function(d) {
                return radius(d.size);
            })
            .style("fill", function(d) {
                return...

CSS

.link line {
        stroke: #696969;
    }
   #tt-name {
        color: #fff;
        background: #333;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
        -webkit-box-shadow: -0px 0px 6px rgba(0, 0, 0, .7);
    }
    
    .link line.separator {
        stroke: #fff;
        stroke-width: 2px;
    }
    
    .node circle {
        stroke: #000;
        stroke-width: 1.2px;
    }
    
    .node text {
        font: 12px sans-serif;
        pointer-events: none;
         margin-left: -30px
    }