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.
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.
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.
After the initial design, I asked for feedback from the online community and made the following adjustment
1. Data Adjustment:
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.
Layout: Adjust spacing and different layout positions
- Treemap: Use a single color scheme to distinguish different value
- Line chart: Add gradient as a guide for user's eyes
To make the chart look good to excellent, I have created a tooltip for the ease of reading and provide appropriate information.
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.