CO2 Emission Dashboard

co2 emission dashboard

Stack: D3.js, Javascript, SASS

r/dataisbeautiful is a subreddit dedicated to aesthetically pleasing works of data visualization. There is some interesting thing in that subreddit. Some of the posts always mentioned D3.js as one of the tools. I gave it a shot to try out this library and made a simple dashboard.

Planning

With the layout in mind, I browse around on Behance and Dribble for inspiration and proceed to draw out the layout on paper. The design is split into four sections: historical growth, daily indicator, sector, and country ranking.

Process


retrieve, modify, display

Retrieve data using API and world bank data

A simple google search on CO2 emission data allows me to find various relevant information. Before that, I looked into the World Bank API. But, the data is very complex and excessive for the information that I am looking for, so I switched to downloading some parts of the data from the data bank.


Modify the data into ideal output

Modifying the data requires the array & object method; I have learned new high-order array methods and some of the es6 features over the project.


Display data using D3.js library

D3.js is a library I have never used before. It has a relatively steep learning curve; it took me a while to get familiar with and understand the fundamentals. Most of the time, I have to look up the example chart and adjust the code accordingly.

Feedback


rough design

After the initial design, I asked for feedback from the online community and made the following adjustment


1. Data Adjustment:

before and after data changes

Fishing and Final Consumption's values from the sector chart are significantly small to be visible. Therefore, I have placed those sectors into another sector.


2. Design:


color palette for the new design

Layout: Adjust spacing and different layout positions
Colors:

- Treemap: Use a single color scheme to distinguish different value

- Line chart: Add gradient as a guide for user's eyes


3. Interaction:

tooltip animation line animation

To make the chart look good to excellent, I have created a tooltip for the ease of reading and provide appropriate information.

Lesson learned


Reading documentation

Look up documentation instead of searching for direct answers will probably save me a ton of time. The first mistake I made in this project is not looking up the correct version, while most chart examples and solutions on the internet are older versions.


Ask for help

It was very frustrating when I got stuck on some parts of the code. The only thing I regretted in this project was not asking for help earlier than I should. D3.js slack and discord web dev are both very helpful when I was working on this project. Without those help from the communities, it will take longer than the current time frame.

Fin.