JSFiddle - React, Tailwind, and code Playground
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 data = {
"name": "root",
"children": [
{
"name": 0,
"cluster_size": 1,
"children": [
{
"post_count": 25,
"name": "1AnjL"
}
]
},
{
"name": 1,
"cluster_size": 1,
"children": [
{
"post_count": 91,
"name": "1hugaholic"
}
]
},
{
"name": 2,
"cluster_size": 1,
"children": [
{
"post_count": 15,
"name": "4susiesjoy"
}
]
},
{
"name": 3,
"cluster_size": 583,
"children": [
{
"post_count": 67,
"name": "5601Lisa"
},
{
"post_count": 1,
"name": "843rphyllis"
},
{
"post_count": 11,
"name": "abhege"
},
{
"post_count": 2,
"name": "Adamdadz"
},
{
"post_count": 1,
"name": "AfrinaJahan"
},
{
"post_count": 63,
"name": "Aguane"
},
{
"post_count": 2,
"name": "Akiraana"
},
{
"post_count": 1,
"name": "al03"
},
{
"post_count": 2,
"name": "alanalisette"
},
{
"post_count": 10,
"name": "AlaynaGT"
},
{
"post_count": 1,
"name": "alexa"
},
{
"post_count": 1,
"name": "alexorange"
},
{
"post_count": 1,
"name": "alliumhead"
},
{
"post_count": 2,
"name": "Almostdone"
},
{
"post_count": 3,
"name": "AloeVeraCarebyKevin"
},
{
"post_count": 3,
"name": "AlohaHoya"
},
{
"post_count": 3,
"name": "alovealoe"
},
{
"post_count": 9,
"name":...