JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://csis-ilab.github.io/js-viz/china-education/cn-all.js"></script>
<script src="https://csis-ilab.github.io/js-viz/china-education/cn-all.js"></script>
<div id="container" style="max-width: 1000px"></div>
	  <button class="education">Education Data</button>
	  <button class="literacy">Literacy Data</button>

CSS

#container {
				height: 500px;
				min-width: 310px;
				max-width: 800px;
				margin: 0 auto;
			}
			.loading {
				margin-top: 10em;
				text-align: center;
				color: gray;
			}

JavaScript

$(function () {

	    // Load the data from a Google Spreadsheet
	    // https://docs.google.com/spreadsheets/d/1T86iK1rSARZ1mNaV8i0_UCyDFwpteQlJeIuqYxnCWB4/pubhtml
	    
	    var dataObj;

        // Initiate the chart
        var chart = Highcharts.Map('container', {

        	data: {
        		googleSpreadsheetKey: '19kgxBbXfR5U_ChroG9VrQT9iHIIF5PB3uMXLHM5Qsog',

		        // custom handler when the spreadsheet is parsed
		        parsed: function (columns) {

		            // Read the columns into the data array
		            var data = {
		            	education: [],
		            	literacy: []
		            };
		            $.each(columns[0], function (i, code) {
		            	if(i != 0) {
			                data.education.push({
			                    code: columns[1][i].toUpperCase(),
			                    value: parseFloat(columns[2][i]),
			                    name: columns[0][i],
			                    countryMatch: columns[3][i],
			                    // devLevel: columns[4][i].toUpperCase()
			                });
			                data.literacy.push({
			                    code: columns[1][i].toUpperCase(),
			                    name: columns[0][i],
			                    value: parseFloat(columns[6][i]),
			                    countryMatch: columns[5][i]
			                });
			            }
		            });

		            dataObj = data;
		        }
        	},


			//frame style
            chart : {
                borderWidth : 1
            },

            colors: ['rgba(19,64,117,0.05)', 'rgba(19,64,117,0.2)', 'rgba(19,64,117,0.4)',
                'rgba(19,64,117,0.5)', 'rgba(19,64,117,0.6)', 'rgba(19,64,117,0.8)', 'rgba(19,64,117,1)'],
			//title of map
            title : {
                text : 'GDP Growth Targets of the 13th Five-Year Plan'
            },

			// +/- zoom
            mapNavigation: {
                enabled: true
            },

			credits: {
				enabled: true,
				href: "http://csis.org",
				text: 'Perfecting...