30 Days of D3

- 4 mins

I started learning D3 and kept going for 30 days. Each day, I tried tinkering and building something from what I learned. Below is my progression from day 1 to 30 in the form of 15 completed projects, where each one took a day or two to complete. This project is part of a personal challenge to help me achieve two goals: (1) learning and practicing more data visualization techniques and (2) working out my willpower muscles based on how consistently I stayed the course for a month.

Why 30 Days?

30 days is arbitrary. A month is not so long where boredom will cause me to give up the project. Yet it is not too short where the effort feels inconsequential.

Why D3?

D3 has long been on my bucket list of things to learn. Since I have experience with Javascript, it was straightforward picking up D3. However, those who need a crash course to cover the basics before diving into D3, check out Scott Murray’s awesome guide. But D3 is only one of many tools for visualizing data. The better question is, why data visualization?

Why Data Visualization?

As a product manager in the Experimentation Platform team at Microsoft, I’ve experienced first-hand the importance of being data-driven. Using data to make optimal product decisions is critical! At the same time, my passion lies in the realm of human-computer interaction (HCI); I love obsessing over design details and enjoy spending hours talking about user interactions. Data visualization is a happy intersection between these two interests.

Where HCI focuses on the interfaces between humans and technology, data visualization is analogously about the interface between people and data. Good data visualization relies on the same principles for good product design, namely: coherency, simplicity, ease of human interpretation, and minimal cognitive leakage.

Lessons Learned

Next Steps

Though I developed a backlog of questions that would require explorations into data to discover insights, I found it more tempting to just create fun animations, such as an animated clock and another variation. Up next, I’d focus more on digging deeper into data exploration and analysis.

Inspiration

Initial ideas for doing an X day challenge came from Sam Lu’s 100 Days of Swift and Allen Wong’s 30 Days of Swift.

If you’re interested in learning more about D3, there are lots of great resources. Here are the ones I found useful


Projects

Feel free to check out the visualizations at Codepen or GitHub.

Project 15 - Fitbit Steps

Fitbit Steps Line Chart

Project 14 - Arclock

Arclock

Project 13 - Force Layout Repulsion

Force Layout Repulsion

Project 12 - US Population Age Group Donut Chart

US Population Age Group Donut Chart

Project 11 - US Population Age Group Pie Chart

US Population Age Group Pie Chart

Project 10 - Flight Animation

Flight Animation

Project 9 - A Simple Kevin Bacon Graph

A Simple Kevin Bacon Graph Screenshot

Project 8 - US Population Bubble Map

US Population Bubble Map Screenshot

Project 7 - D3 Animated Clock

Animated Clock Screenshot

Project 6 - A Map

A Map Screenshot

Project 5 - Scatterplot and Axes

Scatterplot and Axes Screenshot

Project 4 - Simple Scatterplot

Simple Scatterplot Screenshot

Project 3 - SVG Bar Chart

SVG Bar Chart Screenshot

Project 2 - SVG Circles

SVG Circles Screenshot

Project 1 - Bar Chart

Simple Bar Chart Screenshot


Thomas Truongchau

Thomas Truongchau

Product Manager

rss facebook twitter github youtube mail spotify instagram linkedin google pinterest medium vimeo