Imaginary Text

Visualizing the Weather

JMaxNovember 7, 2023 outside, colophon

I watch the weather. I’m semi-obsessive about it, actually: we have a multiple thermometers around our house, and I look at Environment Canada’s forecast a couple of times every day. I’m constantly trying to stay on top of what it’s going to be like out there. And climate change makes me extra interested/concerned/obsessive.

What the usual weather services don’t give me much of is “what happened”—yesterday, last week, last month… In exceptional circumstances they’ll note that this was a record-breaking rainfall, or temperature, or whatever, but it’s rarely given any context. So I found myself digging around the Environment Canada website looking at the historical averages and yesterday’s data and whatnot. Eventually, I found where they keep the raw data.

So, Environment Canada nicely produces, in csv format, a dataset with daily values for temperature minimums and maximums, precipitation amounts, and various other bits of context about averages and extremes. Looking at that spreadsheet, I could now see what the weather has actually been doing, and I could compare it to last month, last year, and so on.

Now, in June of 2023, I went to the DHSI and, for reasons having nothing to do with the weather, took a course from Harvey Quamen and Jon Bath on data visualization in Javascript with the D3 library. I’m not much of a Javascript coder, but I made my way through that week-long course and created some weird and colourful things with D3. Later, when I discovered the Environment Canada data, I realized I had the tools to make a nice visualization of the data, for the sake of my daily curiosity and for comparison. Like this:

https://imaginarytext.ca/weather

Here’s how it works: Once every day a cron job on my website downloads Environment Canada’s dataset with the year-to-date values.[1] My JS loads that data, and builds a set of overlaid graphs: max temperature, min temperature, and precipitation. And because, in Vancouver at least, the typical temperature (in degrees Celsius) and the typical precipitation (in millimetres) are similar looking numbers, I used a single Y axis for both, giving me a quick visual that summarizes the weather patterns over the year.

I had to spend a while tweaking that y axis, getting the ‘domain’ right for the scale of the graph. Beginning this in the summer, the range of values was pretty easy: things had varied from slightly below zero to numbers in the thirties. So at first, I let the maximum value define the y axis. But when I started to compare this year with last year, I realized my range was going to have to be much larger when the winter rains set in. So I pegged the scale at 40. And then I went to 50. Then I realized that every year, there were a few days when the rainfall went off the charts, and if I my graph was going to fully capture those extreme rainfalls, then my daily temperature values started to look like little lines creeping along the bottom of the chart by comparison. So instead, I decided to just let 50 be the maximum, and it we get rainfall that’s literally off the charts, then frankly, “off the charts” isn’t a bad description of it. The point of the visualization isn’t the numbers themselves, after all, it’s the shape of the graph.

I could also easily download a whole historical year’s worth of data as a separate csv file, so then I added a picklist so that you could quickly flip between years. That was really interesting. The graph for 2021, for instance, revealed a just insane amount of rain in the fall of that year. And I was reminded that, yeah, that was the year that we all learned the term “atmospheric river,” and you can sure see those on the graph! The whole end of 2021 is a sea of blue.

Being able to grok the shape of the whole year—where it was rainy and where it was drought-y, how the temperatures rose in spring and fell in fall—is more than just instructive. May 2023, for instance, was full summer, if you look at the graph—and while we might remember, anecdotally, that we had a heat wave in May, the full shape of it eludes our day-to-day sense of what the weather is doing, without a visualization that gives you the contextual picture. The extreme weather events may imprint themselves on our memory, but it’s the larger patterns that matter, even more.

The code for this visualization is all within one html file, so anyone (including you) could grab this and adapt it for your own locale: it’s just a matter of downloading the data for the Environment Canada weather station near you. They make that pretty transparent. So if you’re interested, take my code, grab your local data, and bob’s your uncle.


  1. I could probably pull the data live from Environment Canada instead of fetching it daily via cron. That would a little bit more involved (partly because EC’s data services have an ocean of data; this spreadsheet is just the tip of the iceberg) and it would also be overkill: the data changes once per day; there’s no point in downloading it more often than that. ↩︎