by Infogram
Create infographics

2080 weeks of weather in Milan

A visual analysis of the climate conditions in Milan

February 12, 2015

[This is a guest post by Giovanni Magni*, about his visualization project “2080 weeks of weather in Milan“]

 

 

Recently have been published a couple of very interesting project about weather conditions and climate change, such as “Weather Eindhoven 2014” (by Sonja Kuijpers) and “2014 Was the Hottest Year on Record” (by Bloomberg), this made me think about what kind of data are available online, especially about my country and the city where I live, Milan.

I decided to spent a couple of days to work on this personal project about Italian weather to see if there were enough information to work on, to see what comes out and to create some interactive way to explore the subject and to know something more about what happened during years.

In this post I would like to describe the process that led me to publish “2080 weeks of weather in Milan“, going briefly through each step of the evolution of this project.

DATA PROCESS

An online research showed me how there is a lack of websites with reliable and open archives of weather conditions of Italy and, even when they have enough data to work on, there are no API available to download them properly.

Maybe I was searching for too old data (I wanted to visualize at least 30 years), maybe I was just lazy and impatient to start working on, so in the end I decided to use the archives of ilmeteo.it, one of the most famous Italian weather forecasts providers.

(Example of archive’s page on www.ilmeteo.it | Giovanni Magni)

And here we are with the first problems, data were archived month by month in separated .csv files, no API, no other way to download data than manually open each month’s page and personally click on the download link of the spreadsheet.

Fortunately the name of the files followed all the same naming rules so I wrote a very simple javascript page which automatically opened all the 500 months’ page (changing cyclically year’s number and month’s name) forcing the download of all the spreadsheet individually.

Thanks to this little trick my IP wasn’t allowed to access the archive’s section of the website no more (I guess there is a download limit, or something similar) but I got what I was searching for, all the meteorological data of the last 40 years for the city of Milan, day by day.

In fact, my very first idea was to visualize every single day in a webpage but, due to the large amount of elements required (40 years x 365 days = 14.600 elements), this would have slowed to much the browser, therefore I decided to simplify it and to consider weeks instead of days as starting point.

To obtain the data structured as I needed, I wrote a Python script which calculated the following information for each week from 1975 to 2014:

– average temperature during days
– maximum and minimum temperature recorded
– average humidity during days
– total amount of rains

VISUALIZATION

At this point this is what I was facing and the question was: how to visualize these kind of data?

(Example of the final dataset | Giovanni Magni)

I’ve always loved datavis based on a repeated standard graphic element, they generate patterns and textures able to show overall trends and overviews of the considered phenomenon, so I decided to use the same technique for this project.

With D3.JS I created a structure with 40 lines (one per year, from 1975 to 2014) and 53 columns (I didn’t know before, a year can have 52 or 53 weeks) and I put an element for each week in chronological order.

I tried using different shapes and I decided to move on with circles, which leave more empty space between elements, lightening the visual impact of the representation.

(Three different attempts with the grid | Giovanni Magni)

The dots are originally colored according to the average temperature during the seven days considered, what was missing was the possibility to change the information shown and to explore it interactively.

I coded a couple of function to allow the user to switch between different visualization just clicking on a menu, I added labels for each week, then I designed a way to know something more about the history of the subject (Stories) and here we are, the work is almost done!

(Example of week’s label | Giovanni Magni)
(Example of “story”, an additional information’s layer added above the visualization | Giovanni Magni)
(The visualization, isolated from the page, as it appears to the user when landing on the website | Giovanni Magni)
(One f the option is to highlight only the weeks when temperature went above 30°C | Giovanni Magni)

(Highlight of the weeks when temperature went below 0°C | Giovanni Magni)
(Modified size of weeks according to the amount of rains | Giovanni Magni)
(Modified size of weeks according to the amount of rains | Giovanni Magni)

In the end I created a minimal layout where the visualization could have a visual predominance, a menu at the top of the page where the user can choose wich kind of information show, a legend right below the dots and some secondary information to complete the page.

10_layout

 

 

*Giovanni Magni is a Milan-based information designer, currently working as a freelance and collaborating with the DensityDesign Research Lab. You can see more of his work on Behance.

Written by Tiago Veloso

Tiago Veloso is the founder and editor of Visualoop and Visualoop Brasil . He is Portuguese, currently based in Bonito, Brazil.

Follow: