Codementor Events

How I learned D3.js

Published Sep 25, 2018

About me

I'm Sal, a web developer who is passionate about seeing technology actually change people's lifes. I studied Engineering at college, a very mathematical degree - and I got used to seeing a lot of numbers, every day.

Why I wanted to learn D3.js

When I started working, I realised that people actually found all the numbers very confusing, so I became more and more interested in data visualisation. Researching online I found this amazing library, D3.js, that allowed the developers to achieve amazing results turning all that bunch of numbers into graphics that actually made the data more tangible to the users. I had to learn how to do something like that.

How I approached learning D3.js

My approach to learning D3.js was the standard developer way: I just saw a bunch of examples and started playing around with them. Be curious, buddies!

At first, I just got pages ready and started changing attributes. When I saw, I started making my own solutions, which was very appreciated by the companies I was working to at the moment (I did improvements on the systems, bringing data more clearly to the users).

Challenges I faced

I was a bit overwhelmed at first, because D3 is a very flexible platform. After seeing that the framework, yet very powerful, is not magic, I saw that I'd need to refresh some of my geometry skills from the beginning of college again. When I accepted that I needed to do some math (no easy way around it), things became easier.

Key takeaways

D3 taught me that if you want something to be brilliant, you have to do it yourself, from scratch. It's easier and faster than trying to adopt a million ready solutions to what your problem is. If you know the fundamentals of what you're working with (in this case, SVG graphics, and data visualization) you can use all the new tools to achieve your results faster - but not to do all the work for you. That's on the user.

When I tried to use some D3 examples as a "one solution fits all", I ended up in circles not being able to do what I wanted. When I lost the fear of doing it myself from scratch, and actually understanding the underlying logic of building the SVG graphics and manipulating them, I got the results I wanted.

Tips and advice

Play around a lot! There's a bunch of data online that you can just use for free. Play with it. Being curious is a very important skill for developers.

Final thoughts and next steps

I'm still not a pro in D3.js, there are some of modules that I still didn't explore much, like the one to create maps (I've always used Google for that). I feel that I would like to contribute to the community by building a simpler version of the library (or something like it, anyway) some time in the future, to make DataViz a bit more approachable for early-developers or curious and advanced business users.

Discover and read more posts from Sal Sousa
get started
post commentsBe the first to share your opinion
Show more replies