JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<p><strong>Presupuesto para políticas de gasto de Industria y Energía 2018</strong></p>

<script src="https://storage.googleapis.com/gpes-static/d3plus/d3plus-hierarchy.v0.6.full.min.js" defer></script>
<style>
    #viz {
        height: 500px;
    }

</style>
<div id="viz"></div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var data = [{
            color: "#868B86",
            id: "Varios Industria",
            value: 152620000,
            valueL: "152.620.000"
        }, {
            color: "#5B4A59",
            id: "Reconversión e industrialización",
            value: 871450000,
            valueL: "871.450.000"
        }, {
            color: "#FFC331",
            id: "Explotación minera",
            value: 295690000,
            valueL: "295.690.000"
        }, {
            color: "#D7D5A1 ",
            id: "Seguridad nuclear",
            value: 46880000,
            valueL: "46.880.000"
        }, {
            color: "#D7D5A1",
            id: "Desarrollo alternativo cuencas mineras carbón",
            value: 32200000,
            valueL: "32.200.000"
        }, {
            color: "#66CC00",
            id: "Movilidad sostenible",
            value: 66600000,
            valueL: "66.600.000"
        }, {
            color: "#66CC01",
            id: "Impulso Eficiencia y renovables",
            value: 300000000,
            valueL: "300.000.000"
        }, {
            color: "#FFC4A7",
            id: "Costes del sistema eléctrico",
            value: 3750100000,
            valueL: "3.750.100.000"
        }, {
            color: "#48B9E5",
            id: "Otros Normativa y Servicios Generales",
            value: 252580000,
            valueL: "252.580.000"
        }];
        new d3plus.Treemap().data(data).groupBy(["id"]).select("#viz").shapeConfig({
            fill: function(d) {
                return d.color;
            },
            labelConfig: {
                fontFamily: '"Work...