Climate Crush competition

The visualization has been created as an entry to the “Climate Crush” competition held by Weather Analytics. It is based on the “Designing in the rain” dataset, 10 years of rain events from California, Oregon and Washington then integrated with data on weather related events from the National Climate Data Center website.

The original dataset divides each state into a grid of data-points: 216 for Washington State, 263 for Oregon and 423 for California and offered rain inches by hour. In the visualization, each data-point is turned into a circle whose diameter varies according to the daily average of precipitation inches.
By moving the timeline cursor it is possible to navigate throughout the 10 years time span and view precipitations on the map in parallel with a set of severe events.
We split the visualization into three sections, one for each state, due to the large quantity of data and in order to give a more detailed view for each one. The barchart on the right side of the screen fills down along with the timeline progress, to help comparing the trend of precipitation in the three states.

Additionally, in the overview section, the static “heatmap” visualization offers a one glance view of the amount of rain fallen in the considered territories during all the 10 years.

The making of

The initial dataset offered from Weather Analytics has been aggregated by days in order to be able to synthetically represent the entire period taken into account (10 years).
In order to build the interactive web application we used the d3.js library by Mike Bostock togheter with the Topojson plugin. The geographical map layer was styled with Mapbox and imported into the visualization. For each day in the time interval, each data point is plotted with respect to its coordinates using the Mercator projection. The area of each data point is bound to the quantity of fallen rain recorded. The same process was followed to represent the weather related events; in this case, though, the size of the plotted circles is the same since no information was provided on the intensity of such events.

Finally, the heatmap visualization used in the overview page was realized by summing the quantity of rain fallen in each data point over the whole time interval and using the Leaflet.js library and its heatmap plugin.