JSFiddle - React, Tailwind, and code Playground

by JD Weddi

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="regions_div" style="width: 890px; height: 500px;"></div>

JavaScript

google.charts.load('current', {
        'packages': ['geochart']
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {

        var data = google.visualization.arrayToDataTable([
          ['Country', '% de pacientes en tratamiento'],
          ['Cuba', 69],
          ['Argentina', 62],
          ['Brasil', 57],
          ['Bolivia', 22],
          ['Chile', 49],
          ['Colombia', 53],
          ['México', 55],
          ['Benin', 51],
          ['Burkina Faso', 55],
          ['Burundi', 50],
          ['Cameroon', 30],
          ['CAR', 22],
          ['Chad', 54],
          ['Congo', 29],
          ['Côte d’Ivoire', 34],
          ['DRC', 32],
          ['Equatorial Guinea', 32],
          ['Gabon', 56],
          ['Guinea', 28],
          ['Madagascar', 4],
          ['Mali', 32],
          ['Niger', 26],
          ['Rwanda', 74],
          ['Senegal', 44],
          ['Togo', 39],

        ]);

        var options = {
          projection: 'kavrayskiy-vii',
          colorAxis: {
            colors: ['pink', '#e30101']
          },
        };

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }