Project description:

What better way to understand a government’s budget than with construction blocks? In this 3D dataviz, each block represents 5 million dollars. Governments’ budgets could be boring for the general public, but they are very important from a democratic perspective. With this project, I tried to transform a boring topic into an interesting and colorful experience. And since half our readership consumes news on mobile phones, I optimized my code and the experience for both big and small screens.

Impact reached:

This project was published on the same day that Quebec’s budget was released. The idea was that the general public would see how different it was compared to the other reports, traditional text articles, and TV/Radio reports. And it worked! It’s one of our most shared projects in 2020. In the end, I ask the readers to tell me how they found the 3D experience. I received hundreds of emails! A lot of the messages came from teachers who used this dataviz to explain how the government spends the taxpayers’ money.

Techniques/technologies used:

I created a React (javascript library) custom template to keep the visualization visible at all times, while the user presses on the arrows on the side of the screen (or the arrows on its keyboards) to move from a scene to the other. On mobile, I coded the template to use the swipe gesture, which is more natural for touch screens. For the 3D universe, I used ThreeJS (javascript library) to create the lego blocks and to animate them. Behind the hood, it’s using the WebGL technology.

What was the hardest part of this project?

Two things made this project particularly challenging. The first one was the 3D. I had to learn how to use the ThreeJS library by myself. It’s mostly used for commercial purposes or video games. But I couldn’t find great examples for journalistic data visualization purposes! So I had to figure out many things by myself. The other big challenge was the publication date. I had to precode the project in a general and abstract manner as much as I could because I wanted to publish it as soon as the budget was released, even if I didn’t know the budget content!

What can others learn from this project?

With this project, I think other reporters can learn how 3D dataviz could help to explain complex topics to the general public. 3D scenes have an extraordinary potential for immersive experiences. On top of it, it uses WebGL technology which makes the dataviz very efficient, even on mobile phones.

Project links:

ici.radio-canada.ca/info/2020/03/budget-quebec-2020-visualisation-3d/index-en.html