JSFiddle - React, Tailwind, and code Playground
HTML
<div id="dataviz-container"></div>
CSS
#dataviz-container {
margin:auto;
width: 400px;
height:500px;
}
.node {
cursor: pointer;
stroke: #999;
stroke-width: 1.5px;
}
.link {
fill: none;
stroke: #999;
stroke-width: 1.5px;
}
div.tooltip {
position: absolute;
text-align: center;
width: 120px;
height: 20px;
padding: 2px;
font: 12px sans-serif;
background: #CC0000;
color:white;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
JavaScript
var json_data= {
"name": "Histoire du Web",
"children": [
{
"name": "américain",
"type": "tag",
"count": "1",
"children": [
{
"name": "jeff atwood",
"type": "article",
"count": 7
}
]
},
{
"name": "american",
"type": "tag",
"count": "2",
"children": [
{
"name": "Doug Englebart",
"type": "article",
"count": 5
},
{
"name": "jeff atwood",
"type": "article",
"count": 7
}
]
},
{
"name": "coding horror",
"type": "tag",
"count": "1",
"children": []
},
{
"name": "développeur",
"type": "tag",
"count": "1",
"children": [
{
"name": "jeff atwood",
"type": "article",
"count": 7
}
]
},
{
"name": "Engelbart's Law",
"type": "tag",
"count": "1",
"children": []
},
{
"name": "entrepreneur",
"type": "tag",
"count": "1",
"children": [
{
"name": "jeff atwood",
"type": "article",
"count": 7
}
]
},
{
"name": "forum",
"type": "tag",
"count": "1",
"children": [
{
"name": "jeff atwood",
"type": "article",
"count": 7
}
]
},
{
...