Four Things I Learned from my First D3.js Project
As a Computer Science major, I am always looking for ways to broaden my scope of understanding in the realm of technology and data. When I joined CompassRed as an intern this May and was tasked to create unique visualizations using D3.js, my first reaction was: How? Learning a new concept takes time, especially since I would have to juggle JavaScript, HTML, and CSS simultaneously.

To best learn the toolkit, I opted out of watching 10 hour-long D3 tutorial videos on a loop on YouTube. Instead I chose to create a pilot project, which would allow me to explore and learn D3 in manageable chunks, while still creating meaningful data-binding visualizations. Now that my first project is near completion, here are four things I learned during this rollercoaster-of-a learning experience.

1. Examples are Your Best Friends

My mantra when learning D3 was to start with the simplest shape and to build from there. After finding more than a dozen examples online, I finally produced a tiny square and few other shapes. This was a great exercise to get acclimated to the complexity of the D3 library. It was a proud yet fleeting moment as I soon discovered the dark hole I found myself in after even learning the basics.

My very first D3.js visualization: Red Square and Friends.

Because the ultimate goal was to produce graphical visualizations, I found ways to facilitate the process by finding initial code from base examples posted online from developers who seek those who want to re-use their code. I then utilized this code to build something greater and more complex. This is what truly makes D3.js unique– it is an effective way to master the skill by constructing a bigger, better visual from the parent.

This is an example of a basic line graph I found online (source).

My new line graph built from the one above.

As seen above, the new line graph uses snippets of code from the base line graph (i.e., the axis structure). However, with the addition of zoom, brushing, color mapping, and axis labels, the new visualization is transformed into a more comprehensive data story about, in my case, New York gas prices.

Examples are great tools and resources to be a successful D3.js master, and I have grown to appreciate them so much more.
['Pooja Kaji']
['Data Visualization', 'D3js', 'Data Science', 'Data', 'Computer Science']