Weather data analysis and visualization – Big data tutorial Part 7/9 – Visualizing: GIS & map part 2

Tutorial big data analysis: Weather changes in the Carpathian-Basin from 1900 to 2014 – Part 7/9

Data visualization – GIS, map based using Kartograph – Subsection 2/2

The two examples showcased in the previous part:

I?ve combined the two together:

  • Using the files from the animated symbols of the first one and
  • Added tooltip data by altering the addSymbol function in the JS section of index.html
  • Tooltips containing PRCP data for each decades
symbols = map.addSymbols({
type: $K.Bubble,
data: weatherStations,
location: function(d) { return d.ll },
attrs: symbolAttrs,
tooltip: function(d) { return $.trim(d.Weather)+<br>Rainfall 1900: ' +d['1900']+' mm'+ '<br>Rainfall 1910: ' +d['1910']+' mm'+ '<br>Rainfall 1920: ' +d['1920']+' mm'+ '<br>Rainfall 1930: ' +d['1930']+' mm'+ '<br>Rainfall 1940: ' +d['1940']+' mm'+ '<br>Rainfall 1950: ' +d['1950']+' mm'+ '<br>Rainfall 1960: ' +d['1960']+' mm'+ '<br>Rainfall 1970: ' +d['1970']+' mm'+ '<br>Rainfall 1980: ' +d['1980']+' mm'+ '<br>Rainfall 1990: ' +d['1990']+' mm'+  '<br>Rainfall 2000: ' +d['2000']+' mm'+ '<br>;Rainfall 2010: ' +d['2010']+' mm'+ '<br>Rainfall 2013: ' +d['2013']+' mm'; }
});

Looking at the map, some tooltip refinement was needed as those were out of the page, due to their large size:

As I?ve defined a big tooltip to show I?ve changed the positioning by altering kartograph.min.js

Changing this line kartograph.min.js

t={position:{target:"mouse",viewport:e(window),adjust:{x:7,y:7}},show:{delay:20}

to this

t={position:{my: 'bottom left', target:"mouse",viewport:e(window),adjust:{x:7,y:-7}}

By using the documentation of the Qtip2 JS plugin.

Download the example diagram of interactive HTML with JQuery and supporting JS files: Map_Diagram.zip

Hint: should you need to edit your resulting SVG vector map, install Inkscape, an easy to use graphical SVG editor (e.g. delete a polygon, a border of a country, add elements, add text, etc.)