Trials and Tribulations with D3
I’ve attempted to “get started” with D3 a handful of times. Just recently I found two sites that actually helped me both start and finish a project so I thought I’d share. I’ve spent hours looking for good tutorials, both written and on YouTube, and always came up short. My problem with most tutorials is that half the project is done when they start. You can’t code along. You don’t know what dependencies they have loaded, where they got their data, how they loaded their data into the project, what functions already exist above the code or in other files… And with D3, which is a huge departure from regular JavaScript style and syntax, it can be a problem.
The first tutorial I found that was awesome was from Mr. Bostock himself. You make a map of the UK with plotted cities from scratch. You go to the sites he suggests to get data, he tells you how to get that data into your project (with some very cool terminal commands) and then shows you how to use that data to make the thing. It’s an older tutorial, from 2012, so there were a few things that got a little wonky. I actually had to use some of my own logic to solve a problem when following the directions exactly didn’t work. My guess is since D3 has been updated over the years, some of the things he uses in this tutorial are no longer supported. But if I can figure it out, anyone can. You can find the tutorial here. He also links to a newer tutorial at the top of the page.
The second site I found is DataMaps. It’s not so much a step by step tutorial, but rather an easy way to build some generic maps with some cool effects. I wanted a map of the whole world, which is a popular option, and I found some good information through the getting started link on the page. I chose to get started with Bower and the example already had the world map as the chosen datamap, so it was pretty straight forward. You can also get started using NPM.
Do I feel like I understand D3 well now? Not really, but I do feel empowered to try more now that I’ve successfully built two things. I ended up using the world map in a personal project that I’m using to blog about my travel experiences. I wanted to host it on GitHub pages and ran into a fun new issue. GitHub pages uses Jekyll and therefore needed my Bower dependencies to run properly. I had to update my .gitignore file and take out the Bower dependencies and upload them all to my repo. While it was annoying, it solved the problem and my site now runs on GitHub pages!
