Overlaying a grid to facilitate the reading of multiple charts in the same page

When designing a new project, as a Data Visualization practitioner I am always torn between the desire to provide as many meaningful data as possible and that of telling a story, adding text to support the data and make them more understandable to a wider audience.

I honestly love to create one-pagers where texts not only contain dry explanations on how to read the charts but also provide some context, a larger view of the topic I am showing.

I recently started working on a project about traffic and pollution in my city, Milan, known as one of the capitals of fashion, design, and… emissions! The first chapter of this project is called L’Aria di Milano and it is a one-pager that shows the daily level of pollutants in the city. Among its open data, the City of Milan provides an API that returns pollutants levels registered by nine stations scattered around the municipality. The idea was to use this data to create an easy-to-read website giving the reader a general idea of the air quality in the city.

The second chapter of the project is called Il Traffico di Milano and aims to provide some insight about traffic using historical data gathered from the same open data portal. The first part of this chapter, “La Grande Corsa”, shows how the fleet of cars registered to Milan residents changed over the years. Because the City of Milan decided to ban all Diesel vehicles by 2030 by imposing a calendar aimed at progressively banning older vehicles based on their environmental (or Euro) class, there are a lot of new cars in town.

On the one hand, it is quite obvious that the decision to ban certain kinds of cars aims at reducing the emissions of pollutants; on the other hand, the effectiveness of this decision is not completely clear. That is why I decided to add some charts highlighting the aggregated values of PM10, NO2, and O3 by year. In order to include yet another comparison metric, I searched for (and found) data about precipitations and added them to the mix.

I ended up with a page full of charts showing a wide variety of different data, each one with a specific explanation on how to read the charts themselves, how the data were collected and computed, why they are important, and how they correlate to other charts.

Yet this huge amount of text made the page rather hard to read for users who were simply interested in comparing figures to see if the traffic regulations enforced by the City had actually been effective.

The problem was far from obvious: should I just proceed with the page as it was, or should I revert to a sort of dashboard with all the charts and no explanation at all?

In the end, I decided to go for a half-and-half solution: the page loads with all the texts and charts. If you are a casual user, this will be enough for you; but if you want to take a closer look at the relationships among different KPIs, then you may enable the “Comparison View” which hides all the texts, reduces the height of the page, and overlays a grid on top of the charts to make them more readable.

By implementing this solution, I have been able to both tell a story and allow my visitors to analyze the data and come to their own conclusions.