JSFiddle - React, Tailwind, and code Playground

by sashareds

HTML

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geochart'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyBgxLAOHUq52CuZ0kcl9WHnOjzt40w082k'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
        ['County',   'Case'],
        ['Carlow',   0],
        ['Cavan',   41],
        ['Clare',   50],
        ['Cork',   292], //IE-CO
        ['Donegal',   77],
        ['Dublin',   2077],
        ['Galway',   98],
        ['Kerry',   79],
        ['Kildare',   103],
        ['Kilkenny',   47],
        ['Laois',   16],
        ['Leitrim',   12],
        ['Limerick',   96],
        ['Longford',   16],
        ['Louth',   54],
        ['Mayo',   55],
        ['Meath',   88],
        ['Monaghan',   17],
        ['Offaly',   47],
        ['Roscommon',   13],
        ['Sligo',   26],
        ['Tipperary',   94],
        ['Waterford',   43],
        ['Westmeath',   86],
        ['Wexford',   18],
        ['Wicklow',   105]
        ]);

        var options = {
          region: 'IE', // Africa
          resolution: 'provinces',
          colorAxis: {colors: ['#f9cb9c', '#f07b50', '#ea4435']},
          backgroundColor: 'white',
          datalessRegionColor: '#fefefe',
          defaultColor: '#fefefe',
        };

        var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
        chart.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="geochart-colors" style="width: 90%; height: 90%;"></div>
  </body>
</html>