JSFiddle - React, Tailwind, and code Playground

by J.D. Ray

HTML

<script src="http://d3js.org/d3.v3.js"></script>
<body></body>

CSS

.node {
    cursor: pointer;
}
.node:hover {
    stroke: #000;
    stroke-width: 1.5px;
}
.node--leaf {
    fill: white;
}
.label {
    font: 22px"Helvetica Neue", Helvetica, Arial, sans-serif, bold;
    text-anchor: middle;
    text-shadow: 0 0px 0 #fff, 0px 0 0 #fff, 0px 0 0 #fff, 0 0px 0 #fff;
}
.label, .node--root, .node--leaf {
    pointer-events: none;
}
div.tooltip {
    position: absolute;
    background: #BADBA4;
    border: 2px solid #6D6D6D;
    line-height: 1px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 5px 5px 8px #91AB80;
    padding:12px;
}

JavaScript

var margin = 20,
    diameter = 960;

var pack = d3.layout.pack()
    .padding(2)
    .size([diameter - margin, diameter - margin])
    .value(function (d) {
    return d.size;
});

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

var div = d3.select("body")
    .append("div") // declare the tooltip div 
.attr("class", "tooltip") // apply the 'tooltip' class
.style("opacity", 0);

var root = {
    "name": "Web Sites",
        "children": [{
        "name": "News",
            "link": "http://www.google.com",
            "children": [{
            "name": "Gizmag",
                "link": "http://www.gizmag.com",
                "children": [{
                "name": "Smartphone microscope can be made for under a dollar",
                    "link": "http://www.gizmag.com/pnnl-smartphone-microscope/33861/",
                    "size": "203"
            }, {
                "name": "",
                    "link": "http://www.gizmag.com/amazon-kindle-voyage-ereader/33859/",
                    "size": "207"
            }, {
                "name": "Amazon sets sail with its latest eReader: The Kindle Voyage",
                    "link": "http://www.gizmag.com/amazon-kindle-voyage-ereader/33859/",
                    "size": "209"
            }, {
                "name": "",
                    "link": "http://www.gizmag.com/water-nuclear-battery-radiolysis/33844/",
                    "size": "213"
            }, {
                "name": "Long-lasting, water-based nuclear battery developed",
                    "link": "http://www.gizmag.com/water-nuclear-battery-radiolysis/33844/",
                    "size": "215"
            }, {
                "name": "",
                    "link": "http://www.gizmag.com/dremel-3d-idea-builder-printer/33850/",
                    "size": "219"
            }, {
               ...