JSFiddle - React, Tailwind, and code Playground

by patelsan

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
    var source = {
        "name": "Brasil",
            "children": [{
            name: "Norte",
            children: [{
                name: "Acre",
                    "size": 20
            }, {
                name: "Amapá",
                    "size": 20
            }, {
                name: "Amazonas",
                    "size": 251
            }, {
                name: "Pará",
                    "size": 107
            }, {
                name: "Rondônia",
                    "size": 33
            }, {
                name: "Roraima",
                    "size": 7
            }, {
                name: "Tocantins",
                    "size": 39
            }]
        }, {
            name: "Nordeste",
            children: [{
                name: "Alagoas",
                    "size": 60
            }, {
                name: "Bahia",
                    "size": 512
            }, {
                name: "Ceará",
                    "size": 553
            }, {
                name: "Maranhão",
                    "size": 80
            }, {
                name: "Paraíba",
                    "size": 89
            }, {
                name: "Pernambuco",
                    "size": 671
            }, {
                name: "Piauí",
                    "size": 36
            }, {
                name: "Rio Grande do Norte",
                    "size": 263
            }, {
                name: "Sergipe",
                    "size": 54
            }]
        }, {
            name: "Centro Oeste",
            children: [{
                name: "Distrito Federal",
                    "size": 484
            }, {
                name: "Goiás",
                    "size": 332
            }, {
                name: "Mato Grosso",
                    "size": 126
            }, {
                name: "Mato Grosso do Sul",
                    "size": 91
            }]
        }, {
        ...

CSS

circle {
    cursor: pointer;
    stroke: #000;
    stroke-width: .5px;
}
line.link {
    fill: none;
    stroke: #9ecae1;
    stroke-width: 1.5px;
}

JavaScript

var w = 960,
    h = 640,
    node,
    link,
    root;

var force = d3.layout.force().on("tick", tick).charge(function (d) {
    return d.children ? -120 : -60 * Math.sqrt(d.size);
}).linkDistance(function (d) {
    return 80;
}).size([w, h - 160]);

var vis = d3.select("body").append("svg").attr("width", w).attr("height", h);

root = source;
root.fixed = true;
root.x = w / 2;
root.y = h / 2;
update();

function update() {
    nodes = flatten(root);
    links = d3.layout.tree().links(nodes);
    updateLinks();
    updateNodes();
}

function updateLinks() {

    force.links(links).start();

    link = vis.selectAll("line.link").data(links, function (d) {
        return d.target.id;
    });

    // Enter any new links.
    link.enter().insert("line", ".node")
        .attr("class", "link")
        .attr("x1", function (d) {
        return d.source.x;
    }).attr("y1", function (d) {
        return d.source.y;
    }).attr("x2", function (d) {
        return d.target.x;
    }).attr("y2", function (d) {
        return d.target.y;
    });

    link.exit().remove();

}

function updateNodes() {

    force.nodes(nodes).start();

    node = vis.selectAll(".node").data(nodes, function (d) {
        return d.id;
    });

    // Enter any new elements.
    var container = node.enter().append("g").attr("class", "node")
    .attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    }).call(force.drag);
    container.append("circle").attr("r", radius).style("fill", color).on("click", click);
    container.append("text").style("text-anchor", "middle");

    // update radius and text
    node.selectAll("circle").transition().attr("r", radius).style("fill", color);
    node.selectAll("text").text(function (d) {
        return !d.children ? d.name : null;
    });

    node.exit().remove();
}

function tick() {
    link.attr("x1", function (d) {
        return d.source.x;
    }).attr("y1", function (d) {
        return d.source.y;
    }).attr("x2",...