5 Things I’m Doing to Learn D3
I have been documenting my process learning to make static visualizations for the past half year. I worked hard to learn more about the craft, I read books, listened to podcasts, followed key authority figures, and practiced. But I knew that static visualizations was not my final destination. I wanted to create more dynamic work. I wanted to create work that would move.
I discovered D3 in March 2017. I was at an event called Code Across Canada in Toronto. I was in a group of over ten people working on a specific visualization challenge. One of my teammates was using Tableau. After the workshop, he showed me a personal project he made using D3. And that was the first time I heard about it. At this point, I did not know what javascript was, I knew nothing at all. I didn’t do anything with this newfound knowledge, I just kinda put it at the back of my mind.
A couple months later I discovered Data Stories. Data Stories is a podcast on all things data and visual. It’s a fantastic podcast to listen to, it really helped open up the world of data viz for me by introducing me to all the key people in this field. I remember listening to an episode with Nadieh Bremer and Shirley Wu, I heard about the duo before, but this episode really motivated me to start D3. Nadieh was talking about her visual on Dragon Ball Z, I was surprised to hear that someone made a viz on anime. I personally wanted to do projects like these at the time and I checked it out. I was in awestruck and just amazed at what she built. I remember telling myself at that moment “I want to make this”. And then I started to learn D3.
Countless Resources to Learn
The great thing about D3 is that many resources exist. For example, http://blockbuilder.org/search, which I found out about via Nadieh Bremer’s blog post. There are many YouTube videos, such as D3Vienno. It is practically countless. This is very important when learning anything new. Having resources that are abundant makes it easier to learn and less frustrating. It might be a no-brainer, but I struggled to learn Processing due to the lack of resources for it.
I tried to learn Processing for a couple months on and off but it failed miserably. I really struggled to find resources, although Daniel Shiffman’s videos were great, I couldn’t find resources beyond that to guide my learning. There were limited good examples that I could follow and it was confusing that there was also Processing.js and p5.js. I struggled to put my creations online and there weren’t many forums that were effective. Compared to learning D3, Processing was hectic. I went through many phases of setbacks because I kept hitting walls that just got higher and higher. I even took a Processing workshop for a day, which actually helped me understand more about HTML, CSS, and Javascript, but not much on Processing. Regardless, this workshop was crucial in helping me learn D3 because I had more context about coding for the web in general.
Here’s how I learned D3:
1. Monkey See, Monkey Do.
For D3, I started off just copying D3Vienno’s tutorials. Whatever he said to do, I did. I just copied him as he coded. I did question many things, but I just went along with it and tried to learn the language. I tried to understand the rhythm, the syntax, and the vocabulary. I continued this until his tenth video and then thought I needed to understand what was really going on and why things were the way they were. So, I Googled and found more resources to learn deeper.
2. Understand Why
I wanted to be flexible with D3 and be able to create what I imagined, so I needed to know why. I needed to know why D3 functions the way it is. I found a great and easy to read set of online tutorials by Scott Murray. He continued his tutorials with his eBook (which you can access online for free). I went through his tutorials and after repeating some of them and trying to understand the why, I decided to try to make my own project.
3. Use What You Love and Know
Learning something new is never fun, it can be frustrating and hard. I knew I had to work with fun data and nothing dry. So I decided to focus on an anime series and collected my own data. Long story short, use data you care about so it is more interesting and meaningful.
4. Lower Your Expectations
My project was tough, I didn’t know if I could get it to how I imagined it. I had so many ideas on how to ‘perfect’ it but I had to make a call to give up certain features. My main priority was to get this done, no matter how it looked. I wanted to put a checkmark on this project and move on to the next. The final result did not look as great as I would have liked it to, but that did not mean it was all for nothing. Sure I learned more about D3, but I also learned more about CSS and also how to upload custom code to my Wordpress site. This was something I failed with Processing, big time. I could not, for the life of me, figure out how to upload anything I made on Processing to my Wordpress site and it was a huge struggle. I couldn’t achieve it. But with D3, I did.
5. Have Patience
I think the biggest requirement to learning D3 is to have patience. I recall that as I was working on this project, I told myself that this is the first step to learning and I will be proud to look back in two years time. I wanted to give up many times, but I kept imagining what it would be like if I was able to visualize all the times Naruto said “Believe it!” in the entire series, or all the times Edward Elric from Full Metal Alchemist got called short. I just kept on daydreaming that and it helped me focus to learn.
It’s All In Time
If you think about it, all it costs is just time. Learning anything requires the work to be put in and it’s okay if it takes longer to learn something simple. The only thing is that there is progress and there is change. If you find yourself paralyzed and not sure how to start, I would suggest you to check out the first couple of videos done by some of the most successful YouTubers. You can really see how they changed and evolved over time. Everyone has to start somewhere.
Since you made it this far into this article, here’s a link to the first ever D3 project I recently completed (which was July 2017 for the folks reading in the distant future).
I am aspiring to be an information designer. With no formal background in this field, I am equipped with a combination of skills from design strategy and life sciences.
If you enjoyed reading this, please ♥ this article, I would really appreciate it.
