JSFiddle - React, Tailwind, and code Playground
by Osvaldo
HTML
<script src="https://d3plus.org/js/d3plus-hierarchy.v0.6.full.min.js" defer></script>
<style>
.tooltip-table {
width: 100%;
}
.tooltip-table .data {
text-align: right;
}
.tooltip-footer {
opacity: 0.5;
}
#viz {
height: 400px;
}
</style>
<div id="viz"></div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var data = [{
color: "#868B86",
id: "IRPF",
parent: "Impuestos directos y cotizaciones sociales",
value: 66519000000,
valueL: "66.519.000.000"
},
{
color: "#5B4A59",
id: "Impuestos sobre el capital",
parent: "Impuestos directos y cotizaciones sociales",
value: 200000000,
valueL: "200.000.000"
},
{
color: "#5B4A59",
id: "Cotizaciones sociales",
parent: "Impuestos directos y cotizaciones sociales",
value: 963522050,
valueL: "963.522.050"
},
{
color: "#5B4A59",
id: "IVA",
parent: "Impuestos indirectos",
value: 33052000000,
valueL: "33.052.000.000"
},
{
color: "#5B4A59",
id: "Otros impuestos indirectos",
parent: "Impuestos indirectos",
value: 6766912460,
valueL: "6.766.912.460"
},
{
color: "#5B4A59",
id: "Tasas",
parent: "Tasas y otros ingresos",
value: 840000000,
valueL: "840.000.000"
},
{
color: "#5B4A59",
id: "Ingresos por prestación de servicios",
parent: "Tasas y otros ingresos",
...