JSFiddle - React, Tailwind, and code Playground
by anay29
HTML
<!DOCTYPE html>
<style>
.button {
min-width: 130px;
padding: 4px 5px;
cursor: pointer;
text-align: center;
font-size: 13px;
border: 1px solid #e0e0e0;
text-decoration: none;
position:absolute;
top: 70%;
left: 5%;
}
.button.active {
background: #000;
color: #fff;
}
circle {
fill: #BFEBFB;
fill-opacity:.25;
stroke: rgb(229,247,253);
stroke-width: 0px;
border:1px solid red;
}
text{
font:15px sans-serif;
text-anchor:middle;
}
.leaf circle{
fill: #00AEEF;
fill-opacity:1;
}
#data1 {
min-width: 130px;
padding: 4px 5px;
cursor: pointer;
text-align: center;
font-size: 13px;
border: 1px solid #e0e0e0;
text-decoration: none;
}
#data1.active {
background: #000;
color: #fff;
}
#data2 {
min-width: 130px;
padding: 4px 5px;
cursor: pointer;
text-align: center;
font-size: 18px;
color:#00008B;
font-family:"Expert Sans Regular";
border: 1px solid #fff;
text-decoration: none;
background: #E5F7FD;
}
#data2.active {
background: #000;
color: #fff;
top: 70%;
left: 5%;
}
#toolbar {
margin-top: 10px;
}
.name {
font-size: 16px;
fill: #00008B;
cursor: default;
font-family:"Expert Sans Regular";
}
.tooltip {
position: absolute;
top: 100px;
left: 100px;
-moz-border-radius:5px;
border-radius: 5px;
border: 2px solid #000;
background: #fff;
opacity: .9;
color: black;
padding: 10px;
width: 300px;
font-size: 12px;
z-index: 10;
}
.tooltip .title {
font-size: 13px;
}
.tooltip .name {
font-weight:bold;
}
.footer {
text-align: center;
}
</style>
<!-- Add a svg area, empty -->
<div id="Area"></div>
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js" charset="utf-8"></script>
<h3 align="center", style="color:blue;"> Sample Population Dashboard Demo using d3.js cluster pack </h3>
<h4 style="color:blue;">1. Click anywhere on the bubble to see a detailed split (hover to find out more) </h4></br>
<h4 style="color:blue;">2. After the first split click...