Since I started learning D3.js as part of the 100 Days of Code project the number one question I’ve gotten is: how are you learning D3? I’ve had lots of people that want to know what learning resources I’m using, what my process is, and what I suggest for how to start on D3. I don’t think I’m any sort of expert, and I certainly don’t claim to have the ultimate learning process, but now that I’m halfway through the project I decided to share what I’ve learned.
How it all started Take me to the project!
I started using Mapbox earlier this year and I was hooked from the start. I’ve dabbled in geospatial analysis and visualization before, but I was always put off by the huge barrier of entry. Most spatial analysis requires massive amounts of domain expertise, knowledge of specialized data sources, and a huge time investment to gather the data, clean it, and harmonize it to all work well together.
Graphics devices are weird, and operating systems are even weirder. If you are a Mac of Linux user, lucky you, you can go on your merry way! But if you’re a Windows user and you’ve ever screamed at your computer “Why the #&*$ wont my fonts work!?!?” or “Why are my plots so &#**ing pixelated!?!”, then read on. Note this is accurate as of May 2019. There is a lot of development happening on ggplot and graphics in R, courtesy of Thomas Lin Pederson and the rest of the ggplot team.
The Data Visualization Society recently held their inaugural challenge. My final submission was a switchback style timeline that visualized each member as a watercolor splotch. I made the base graphic in R, and applied stylings to the SVG using manual editing and Inkscape. I got several questions about how I made it, so here’s the story from concept to final design.
Concept From first looking at the DVS challenge data, I knew I would make a timeline.