JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v2.min.js"></script>

CSS

circle.node {
    stroke: #fff;
    stroke-width: 3px;
}
line.link {
    stroke-width: 2px;
    stroke: #999;
    stroke-opacity: 0.6;
}
marker#arrow {
    stroke: #999;
    fill: #999;
}

JavaScript

jQuery(function ($) {
    var width = 300;
    var height = 300;

    var color = d3.scale.category10();

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


    var svg = d3.select('body').append("svg").attr("width", width).attr("height", height).attr("id", "cloud");

    var myjson = '{"nodes":[{"name":"small circle","group":1, "cRadius" :10},{"name":"Big circle", "group":2, "cRadius" :15},{"name":"Very big circle",    "group":3, "cRadius" :20},{"name":"Very small circle", "group":3, "cRadius" :8}],"links":[{"source":0, "target":1, "value":1},{"source":1, "target":2, "value":1},{"source":1, "target":3, "value":1}]}';

    var json = JSON.parse(myjson);

    force.nodes(json.nodes).links(json.links).start();

    svg.append("defs").append("marker")
        .attr("id", "arrow")
        .attr("refX", 10)
        .attr("refY", 2.2)
        .attr("markerWidth", 10)
        .attr("markerHeight", 10)
        .attr("orient", "auto")
        .append("path")
        .attr("d", "M0,0 V4 L5,2 Z10");

    var links = svg.append("g").selectAll("line.link")
        .data(force.links())
        .enter().append("line")
        .attr("class", "link")
        .attr("marker-end", "url(#arrow)");

    var nodes = svg.selectAll("circle.node")
        .data(force.nodes())
        .enter().append("circle")
        .attr("class", "node")
        .attr("r", function (d) {
        return d.cRadius;
    })
        .style("fill", function (d) {
        return color(d.group);
    })
        .call(force.drag);

    nodes.append("title")
        .text(function (d) {
        return d.name;
    });

    var text = svg.selectAll("text").data(force.nodes())
        .enter().append("text");
    
        text       
        .text(function (d) {
 return d.name;
    });

    var tspan = svg.selectAll("tspan")
        .data(force.nodes())
        .enter().append("tspan")

    force.on("tick", function () {
        text.attr("x", function...