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)+Rainfall 1900: ' +d['1900']+' mm'+ 'Rainfall 1910: ' +d['1910']+' mm'+ 'Rainfall 1920: ' +d['1920']+' mm'+ 'Rainfall 1930: ' +d['1930']+' mm'+ 'Rainfall 1940: ' +d['1940']+' mm'+ 'Rainfall 1950: ' +d['1950']+' mm'+ 'Rainfall 1960: ' +d['1960']+' mm'+ 'Rainfall 1970: ' +d['1970']+' mm'+ 'Rainfall 1980: ' +d['1980']+' mm'+ 'Rainfall 1990: ' +d['1990']+' mm'+  'Rainfall 2000: ' +d['2000']+' mm'+ ';Rainfall 2010: ' +d['2010']+' mm'+ '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.)

visualizinghadoopinteractive visualization