JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    google.charts.load('current', {
        'packages': ['treemap'],
        language: 'es'
    });

</script>

<div id="chart_div" style="width: 100%; height: 400px;"></div>
<p><small>Haz clic para ver con más detalle y right-click para ver general</small></p>

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Location', 'Parent', 'Volumen del mercado (tamaño)', 'Aumento/bajada del mercado (color)'],
                ['Mundial', null, 0, 0],
                ['America', 'Mundial', 0, 0],
                ['Europa', 'Mundial', 0, 0],
                ['Asia', 'Mundial', 0, 0],
                ['Australia', 'Mundial', 0, 0],
                ['Africa', 'Mundial', 0, 0],
                ['Brazil', 'America', 11, 10],
                ['USA', 'America', 52, 31],
                ['Mexico', 'America', 24, 12],
                ['Canada', 'America', 16, -23],
                ['France', 'Europa', 42, -11],
                ['Germany', 'Europa', 31, -2],
                ['Sweden', 'Europa', 22, -13],
                ['Italy', 'Europa', 17, 4],
                ['UK', 'Europa', 21, -5],
                ['China', 'Asia', 36, 4],
                ['Japan', 'Asia', 20, -12],
                ['India', 'Asia', 40, 63],
                ['Laos', 'Asia', 4, 34],
                ['Mongolia', 'Asia', 1, -5],
                ['Israel', 'Asia', 12, 24],
                ['Iran', 'Asia', 18, 13],
                ['Pakistan', 'Asia', 11, -52],
                ['Egypt', 'Africa', 21, 0],
                ['S. Africa', 'Africa', 30, 43],
                ['Sudan', 'Africa', 12, 2],
                ['Congo', 'Africa', 10, 12],
                ['Zaire', 'Africa', 8, 10]
            ]);

            tree = new...