JSFiddle - React, Tailwind, and code Playground

US chart Start-3

by Karmik Patel

HTML

<!DOCTYPE html>
<html>
  <head>
    <!---- >
    https://developers.google.com/chart/interactive/docs/gallery/geochart#full
    <!---->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['geochart']});
      google.charts.setOnLoadCallback(drawRegionsMap);
      function drawRegionsMap() {
  
        var ar = [
          ['State', 'Companies','Equipments'],
          ['Illinois', 30,0],
          ['US-KS', 0,0],
          ['US-KY', 50,120],
          ['US-LA', 0,0],
          ['US-MA', 0,0],
          ['US-MD', 0,0],
          ['US-ME', 0,0],
          ['US-MI', 0,0],
          ['US-MN', 0,0],
          ['US-MO', 0,0],
          ['US-MS', 0,0],
          ['US-MT', 0,0],
          ['US-NC', 0,0],
          ['US-ND', 0,0],
          ['US-NE', 0,0],
          ['US-NH', 0,0],
          ['US-NJ', 0,0],
          ['US-NM', 0,0],
          ['US-NV', 0,0],
          ['US-NY', 0,0],
          ['US-OH', 0,0],
          ['US-OK', 0,0],
          ['US-OR', 0,0],
          ['US-PA', 0,0],
          ['US-RI', 0,0],
          ['US-SC', 0,0],
          ['US-SD', 10,20],
          ['US-TN', 5,10],
          ['US-TX', 15,30],
          ['US-UT', 30,60],
          ['US-VA', 0,0],
          ['US-VT', 0,0],
          ['US-WA', 1,3],
          ['US-WI', 0,0],
          ['US-WV', 0,0],
          ['US-WY', 0,0],
        ],
            data = google.visualization.arrayToDataTable(ar);

        var options = {
          region: 'US', 
          displayMode: 'regions',
          resolution: 'provinces', // 'metro'
         // legend: 'none',
          animation: {
            easing: 'inAndOut',
            startup: true,
            duration: 2500,
          },
          //these are obtained from google's africa chart example
          colorAxis: {colors: ['yellow','orange' ,'red']},
  ...

JavaScript

/*
US Codes
['State', 'Stats'],
['US-AL', ],
['US-AK', ],
['US-AZ', ],
['US-AR', ],
['US-CA', ],
['US-CO', ],
['US-CT', ],
['US-DE', ],
['US-DC', ],
['US-FL', ],
['US-GA', ],
['US-HI', ],
['US-ID', ],
['US-IL', ],
['US-IN', ],
['US-IA', ],
['US-KS', ],
['US-KY', ],
['US-LA', ],
['US-ME', ],
['US-MT', ],
['US-NE', ],
['US-NV', ],
['US-NH', ],
['US-NJ', ],
['US-NM', ],
['US-NY', ],
['US-NC', ],
['US-ND', ],
['US-OH', ],
['US-OK', ],
['US-OR', ],
['US-MD', ],
['US-MA', ],
['US-MI', ],
['US-MN', ],
['US-MS', ],
['US-MO', ],
['US-PA', ],
['US-RI', ],
['US-SC', ],
['US-SD', ],
['US-TN', ],
['US-TX', ],
['US-UT', ],
['US-VT', ],
['US-VA', ],
['US-WA', ],
['US-WV', ],
['US-WI', ],
['US-WY', ]


US Names
['State', 'Stats'],
['Alabama', ],
['Alaska', ],
['Arizona', ],
['Arkansas', ],
['California', ],
['Colorado', ],
['Connecticut', ],
['Delaware', ],
['Florida', ],
['Georgia', ],
['Hawaii', ],
['Idaho', ],
['Illinois', ],
['Indiana', ],
['Iowa', ],
['Kansas', ],
['Kentucky', ],
['Louisiana', ],
['Maine', ],
['Maryland', ],
['Massachusetts', ],
['Michigan', ],
['Minnesota', ],
['Mississippi', ],
['Missouri', ],
['Montana', ],
['Nebraska', ],
['Nevada', ],
['New Hampshire', ],
['New Jersey', ],
['New Mexico', ],
['New York', ],
['North Carolina', ],
['North Dakota', ],
['Ohio', ],
['Oklahoma', ],
['Oregon', ],
['Pennsylvania', ],
['Rhode Island', ],
['South Carolina', ],
['South Dakota', ],
['Tennessee', ],
['Texas', ],
['Utah', ],
['Vermont', ],
['Virginia', ],
['Washington', ],
['West Virginia', ],
['Wisconsin', ],
['Wyoming', ]

*/