Challenges visualising climate extremes with Leaflet

Delivering map tiles with Geoserver

I usually like to build visualisations that can be statically deployed on a host like GitHub Pages or Netlify. That’s mostly because I often build visuals to be picked up by media outlets or social media, and those sorts of things might be served up ten or a hundred thousand times in a week before winding down to zero. It’s nice not to have to worry about the server costs if something proves unexpectedly popular.

Geoserver serves up map tiles that Leaflet can request as a map layer.

Interactive plots from ggplot: using gridSVG

In another blog post, I discussed our decision to pair the animated map in the Heartbeat visualisation with a bar chart. I’m already very comfortable with ggplot2, and in the past, I would’ve used one of the R packages designed to wrap a JavaScript plotting library, like plotly for R or highcharter, to produce an interactive plot. But this wasn’t a standalone chart: I needed it to stay synced to the Leaflet map, and I wasn’t super comfortable that the limited interactivity of crosstalk could keep them together that way (especially when I was using a Leaflet plugin to the animation work). Nor was I confident that I’d be able to find my way around the resulting plots well enough to figure out where to hook them into the map.

The animated map is controlled by Leaflet.TimeDimension, and I overrode its update method to also animate the chart.
  • Use my existing ggplot2 skills to build and style a plot quickly, without worrying about trying to construct plot elements, and
  • Use the knowledge I was starting to acquire of vanilla JS and jQuery to animate that plot.
  • You can’t touch the chart until it’s loaded (so use an event handler to at least flag when it’s loaded).
  • Any styling you include has to be either added dynamically or included inside the SVG, because regular CSS that is applied to your HTML page can’t touch the contents of your SVG. Although I was able to basically use the SVG output as-is from R, I had to add a <style> tag myself.
  • Finally, you can’t select SVG elements directly from the document context: if you try to use document.getElementsByClassName('chart_bar_pos') or $('#mychart .chart_bar_pos') , it’ll fail. You need to get the SVG root and use that.

Telling stories with Leaflet

One of the aims of these visualisations was to find a way to let non-scientific users find their away what is, really, a gigantic dataset. One of the decisions I made early on was to build a curated experience, where users are walked through interesting aspects of the data along with narrations and other visual elements.

One of the Stories built for Explore Climdex. This one shows the way Daily Temperature Range can be used to attribute changes over the last 50 years to the greenhouse effect.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
James Goldie

James Goldie

Making things for fun and for social good ❤