Comparing weather metrics

As part of the November ’19 Storytelling with Data challenge, weather data for a specific location is used to explore methods for comparing related metrics without using dual axes.

The bottom graph shows a year of daylight hours, against which individual metrics can be compared on the top graph to explore potential trends and patterns.

About the data
  • The weather data used for this visualisation is generated using the Dark Sky API.
  • Data was requested, restructured and processed using Node JS, and stored as static JSON.
  • The data visualisations are custom-built using D3.js, drawing upon many community-provided resources.

A year of weather in my village

Reading the visualisation
  • The bottom graph shows days over the past year, from sunrise to sunset, where taller bars represent longer days.
  • The top graph shows how different weather metrics changed over the course of the year.
  • Toggle different metrics on and off using the buttons above the top graph.
What does it show?
  • The overall aim of the visualisation is provide a means of exploring trends and patterns. Specific values such as temperature or wind speed are deliberately not provided.
  • For instance, as the daily maximum temperature increases, so does the dewpoint.
  • Conversely, as humidity increases, visibility is seen to decrease.

Further features and enhancements

  • Implement basic visualisation of days
  • Implement basic visualisation for first weather metric.
  • Implement further weather metrics.
  • Enable toggling on/off of individual weather metrics.
  • Add an interaction hint if all metrics are toggled off.
  • Remove Y-axis for Graph B as it’s confusing for multiple metrics.
  • Improve colour scheme of weather metrics.
  • Improve the sunrise and sunset hour lines (5am-8am and 5pm-9pm).
  • Add metric datapoints on top of datalines so that hover states can be added.
  • Fix that stupid annoying glitch between the out-of-view topnav and the unclickable metric buttons!
  • Add interactivity between graphs so that appropriate metric datapoints in Graph B are highlighted when a day is hovered in Graph A.
  • Improve main title display in Graph A.
  • Refactor visualisation to handle 365 days from any date rather than start from January 1st.
  • Reduce gap between metric buttons and top of Graph B.
  • Do some browser testing (especially Edge and IE).
  • Optimise the visualisation for mobile and tablet display.