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.
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.
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.
2. Roadblocks are Not Fun but Much Needed
What I found the most difficult when learning D3.js was the amount of brick walls I hit very early on in the learning process. Sometimes, the answer was right under my nose or a quick search away on StackOverflow. However, on other occasions, the web provided an over-the-top solution that I just simply couldn’t grasp. There has got to be a simpler way to do this, I thought. It was during this instance, where trial-and-error and I developed a love-hate relationship.
With D3.js, I discovered several less complex methods to solve a problem by testing and combining different lines of code I learned from more foundational exercises. For example, look at the code snippet¹ below.
This shows the equation to re-scale the y-axis for a graph when you toggle between two unique data sets with different range of numbers. The variable “extents” is a powerful tool that is used to provide a minimum and maximum data point for the axis of a graph. Re-scaling the axis proved to be a difficult task for me, involving more than 30 lines of code until I stumbled upon “extents.” Finding the solution was no easy task and took more than a day to figure out as the answer was not on the web but rather an accumulation of examples and resources I pulled together.
I quickly begin to realize that I would be running into more of these “road blocks” during my D3 journey, and it is simply part of the learning curve to fail. D3 has its own agenda sometimes, and these bumps in the road are necessary to broaden my understanding of not only D3 but also to become a more efficient coder in general.
3. It’s Super Customizable but Super Time-Consuming
While D3 does have functional shortcomings that other visualization tools (i.e., Tableau) excel in, I think one big plus for having this powerful library in my back pocket is the ability to customize without any design limitations.
D3 has a vast library of methods and visualizations and is much more flexible. With enough knowledge and understanding, I could create a beautiful data story to my heart’s content. And, yes, D3 is time consuming, but in exchange I am in more control of my visualization and how I would like to bind my data to my svg element. My pilot project took more than month to complete but it tells a tale and takes the viewer on a data journey, so I consider it a win. It is all about the tradeoffs and whether you prioritize time or a visual masterpiece first.
The visualization above is an example of the immensity of D3 and what I aspire to do after a lot more learning and practicing.
4. Open Source = Eternal Bliss
On GitHub, D3 has been forked over more than 9,000 times, meaning users and developers are constantly expanding the D3 universe with more “wrapper” libraries, visualizations, and methods that actually help with code efficiency.
For my pilot project, I used a wrapper that allowed me to overlay a jitter plot on my box plot and customize different points according to a certain time period. I also added a roll-over function to add price accuracy to the visualization.
As you can see, D3 is a beast that needs a good trainer. Though I have had a little more than a month of experience, I am definitely more acclimated with D3.js’ vastness. Yet, there is so much more to learn. In addition to actual coding languages, this pilot project taught me the necessary patience, the ability to surf the web more efficiently, and the ability to get creative with my code. I am excited to see where D3 will take me as I test its limitations for my next project.
¹ This code snippet uses D3.js.v3 (version 3). Code may look different for other versions of D3.
