JSFiddle - React, Tailwind, and code Playground

by emepyc

HTML

<head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
    <div id="kk"></div>
</body>

CSS

circle {
  fill: rgb(31, 119, 180);
  fill-opacity: .25;
  stroke: rgb(31, 119, 180);
  stroke-width: 1px;
}

.leaf circle {
  fill: #ff7f0e;
  fill-opacity: 1;
}

text {
  font: 10px sans-serif;
}

JavaScript

var data1 = {
    name : "workers",
    children: [
        {
            name : 1,
            time : 21,
            children : [
                {
                    name : 21543,
                    analysis_id : 1,
                    time : 21
                },
                {
                    name : 22232,
                    analysis_id : 1,
                    time : 54
                },
                {
                    name : 12343,
                    analysis_id : 1,
                    time : 126
                }
            ]
        },
        {
            name : 2,
            time : 125,
            children : [
                {
                    name : 12111,
                    analysis_id : 2,
                    time : 61
                },
                {
                    name : 12115,
                    analysis_id : 2,
                    time : 51
                }
            ]
        }
        ]
};

var data2 = {
    name : "workers",
    children: [
        {
            name : 1,
            time : 41,
            children : [
                {
                    name : 21543,
                    analysis_id : 1,
                    time : 251
                },
                {
                    name : 22232,
                    analysis_id : 1,
                    time : 45
                },
                {
                    name : 12343,
                    analysis_id : 1,
                    time : 129
                }
            ]
        },
        {
            name : 2,
            time : 325,
            children : [
                {
                    name : 12111,
                    analysis_id : 2,
                    time : 610
                },
                {
                    name : 12115,
                    analysis_id : 2,
                    time : 151
                }
            ]
        }
        ]    
};

var data3 = {
    name : "workers",
    children: [
       ...