JSFiddle - React, Tailwind, and code Playground

by Gert Vaartjes

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/map.js"></script>
<!-- the map of the netherlands -->
<script src="https://rawgithub.com/gvaartjes/d7ffb721e70b0d5592a8/raw/270cabc061a49532b3df086b34e0c6ac4368b4d1/nederland.js"></script>
<div id="mapdiv" style="height:500px; width: 450px; float: left;"></div>
	<div id="evodiv1" style="height: 500px; width: 300px; float: left;"></div>
	<div id="data.csv" style="display:none">  Gemeente,2013,Provincie,2009,2010,2011,2012
Aa en Hunze,25541,Drenthe,253,268,260,196
Aalburg,12774,Noord-Brabant,76,83,77,57
Aalsmeer,30618,Noord-Holland,139,148,137,106
Aalten,27082,Gelderland,256,251,268,262
Achtkarspelen,28110,Friesland,112,125,139,91
Alblasserdam,19643,Zuid-Holland,71,65,74,62
Albrandswaard,25101,Zuid-Holland,87,75,92,65
Alkmaar,94505,Noord-Holland,193,194,179,53
Almelo,72729,Overijssel,300,311,308,182
Almere,195213,Flevoland,497,545,512,369
Alphen aan den Rijn,72913,Zuid-Holland,189,176,171,117
Alphen-Chaam,9640,Noord-Brabant,102,108,110,81
Ameland,3525,Friesland,96,86,95,88
Amersfoort,149662,Utrecht,401,438,428,200
Amstelveen,84379,Noord-Holland,249,243,234,185
Amsterdam,799278,Noord-Holland,1658,1596,1578,1229
Apeldoorn,157315,Gelderland,675,686,679,544
Appingedam,12053,Groningen,44,54,54,47
Arnhem,149827,Gelderland,403,404,369,330
Assen,67204,Drenthe,277,260,246,217
Asten,16392,Noord-Brabant,71,83,77,71
Baarle-Nassau,6699,Noord-Brabant,73,75,72,53
Baarn,24277,Utrecht,118,138,129,106
Barendrecht,47371,Zuid-Holland,116,128,135,95
Barneveld,53751,Gelderland,371,350,341,317
Bedum,10553,Groningen,52,60,59,53
Beek,16367,Limburg,60,63,63,60
Beemster,8785,Noord-Holland,66,59,56,39
Beesel,13688,Limburg,91,89,80,52
Bellingwedde,8985,Groningen,94,97,97,92
Bergambacht,9938,Zuid-Holland,51,60,47,37
Bergeijk,18191,Noord-Brabant,157,197,159,168
Bergen...

JavaScript

/*
	Found in CSV but not in MAP
		Boarnsterhim
		Boskoop
		Gaasterlân-Sleat
		Haarlemmerliede CA
		Kollumerland CA
		Lemsterland
		Nuenen CA
		Rijnwoude
		Skarsterlan

	Found in MAP but not in CSV
		Kollumerland en Nieuwkruisland
		Haarlemmerliede en Spaarnwoude
		Nuenen, Gerwen en Nederwetten
		De Friese Meren 
*/
// Emulate JQuery ajax for local demo and JSFiddle
$.ajax = function(config) {
    config.success(document.getElementById(config.url).innerHTML);   
}

$(function () {

	// This function wraps an Ajax call to csv data. In the success callback the csv data is parsed
	function getData (callback) {
		$.ajax({
			url: 'data.csv', 
			success: function(data) {
				// Split the lines
				var lines = data.split('\n'),
					result = {
						"2013": []
					};

				// Iterate over the lines and add categories or series
				$.each(lines, function(lineNo, line) {
					var items = line.split(',');
					
					// header line containes categories
					if (lineNo == 0) { 
						// IGNORE
					} else {
						// 2013 as a seperate series
						result["2013"].push({
							name: items[0],
							code: items[0],
							value: items[1]
						});
						// The CSV has the absolute number for 2013, and the growth in the other years,
						// Use these to calculate backwards.
						var d2013 = parseInt(items[1]),
							d2012 = d2013 - items[6],
							d2011 = d2012 - items[5],
							d2010 = d2011 - items[4],
							d2009 = d2010 - items[3];

						// For each municipality add a series with the absolute numbers
						result[items[0] + "absoluut"] = {
							name: items[0],
							data: [
								d2009,
								d2010,
								d2011,
								d2012,
								d2013
							]
						}

						// For each municipality add a series with the growth
						result[items[0] + "groei"] = {
							name: items[0],
							data: [
								parseInt(items[3]),
								parseInt(items[4]),
								parseInt(items[5]),
								parseInt(items[6]),
							]
						}
					}            
				});
			
				//...