Thanks to the Google Maps API it is pretty easy to code up a small JavaScript to turn a bunch of points into an interactively explorable and lovely looking heatmap. You’re welcome to give it a try on heatmap.joyofdata.de where you can load a CSV to display its contained points. The CSV is supposed to be semicolon delimited and contain at least two columns “lat” and “lon” for the geographical location and an optional third numerical column “weight”. The order does not matter. And of course the parsing is done with Papa Parse – what else!
The Technicalities
This would be for example the beginning of population.csv:
|
1 2 3 4 5 |
"weight";"lat";"lon" 20430;42.5;1.5166667 3292;42.5666667;1.6 11224;42.5333333;1.5833333 7211;42.55;1.5166667 |
In the app you can get an idea how the visualities of a heatmap layer may be tweaked:
- Opacity, to influence how much you see of the map
- Radius determines how large hot spots get and when they merge
- The max value sets the upper limit of the interval mapped on the color gradient
Don’t hesitate to check out its code and Google’s examples and documentation to get an idea about the inner workings:
- Example by Google and its JavaScript code
- Google’s documentation on the heatmap layer
- API reference on heatmap layer
You might also for example define a custom color gradient in case green to yellow to red doesn’t do it for you. Just mind that the rgb-value of the first color needs an alpha-level of 0 (fully transparent) – otherwise the whole world will be colored.
A Boiled Down Version of Google’s Taxi Data Example
The code below is just what you will find here – but stripped to its essentials, a few comments and featuring just a single data point.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Heatmaps</title> <style> /* to have the map be displayed as large as possible */ html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization"></script> <script> var map, pointarray, heatmap; // a shortened version of the data for Google's taxi example var taxiData = [ new google.maps.LatLng(37.782551, -122.445368) // ... ]; function initialize() { // the map's options var mapOptions = { zoom: 13, center: new google.maps.LatLng(37.774546, -122.433523), mapTypeId: google.maps.MapTypeId.SATELLITE }; // the map and where to place it map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var pointArray = new google.maps.MVCArray(taxiData); // what data for the heatmap and how to display it heatmap = new google.maps.visualization.HeatmapLayer({ data: pointArray, radius: 50 }); // placing the heatmap on the map heatmap.setMap(map); } // as soon as the document is ready the map is initialized google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <!-- this is where the map finally is drawn onto --> <div id="map-canvas"></div> </body> </html> |
Visualizing Global Population Densities
The data for the heatmap visualizing the populations of almost 48’000 cities around the world is based on the Free World Cities Database provided by MaxMind. The CSV contains more than 3’000’000 rows and 7 columns but only those 48’000 records provide a population number. The following few lines of R code will turn their CSV into something you can load at heatmap.joyofdata.de:
|
1 2 3 4 5 6 7 8 9 |
cities <- read.table("worldcitiespop.txt", sep=",", header=TRUE, quote="", comment.char = "") C <- cities[,5:7] C <- C[!is.na(C[,"Population"]),] colnames(C) <- c("weight","lat","lon") write.table(C, "population.csv", sep=";", row.names=FALSE) |
But you may also simply download the file population.csv from here.
How Much Is Too Much?
In case you are wondering – with Google heatmaps you are able to render a million data points and more. It’s going to give your browser a hard time zooming and occasional freezing won’t be avoidable – but it is possible. I think that is quite amazing!
(original article published on www.joyofdata.de)
Dear Raffael,
Thank you for this nice and user friendly visualization.
I have one question please, What is the way to get the data from a remote source rather than a local one. I could not figure this out.
We have a url that once opened automatically downloads a csv file.
Many thanks,
Salman
Thanks Salman. Your question is too broad and unspecific. I recommend boiling it down to its essentials and asking it at stackoverflow.
Hey Raffael, This is wonderful. Works beautifully.
Is there a way to download these maps in some form? I wish to use this in a powerpoint presentation.
Thanks,
Puneet
Hey Puneet, thanks! How about a good ol’ screenshot? ;) Cheers
Hello Raffael,
beautiful your maps, I’m interested in the heat map of google, I’m trying to use them, but I can not figure out how to bring up the scale of the heat map.
Thank You
Dario
Thanks and good point. The colour scale is not explicitly specified as far as I know. You could provide the density values of some locations to allow for absolute interpretation.