The goal of this data visualization was to introduce a group of aspiring coders to D3.

Many intro to D3 workshops focus on a very basic bar chart. This might be good for learning the fundamentals, but a scatterplot is a whole lot more interesting. Through the magic of D3, it’s really not all that much harder to accomplish. At the end of the evening’s workshop, all participants were able to show off their very own gapminder-style animated chart.

In order to provide everyone in the class a successful experience coding, the project was broken into eight steps. After explaining and demonstrating the concept in each step, participants were given a code template containing a problem to solve. The participants worked on their own, asked each other questions, and received help from the workshop leader and volunteer helpers. After most of the group had solved the problem, the solution was explained and the next concept introduced. Anyone who wasn’t able to solve that step could simply open the next step’s code template and begin coding from there. If you’re curious how it all works, you can download the complete set of steps yourself.

A special thank you to Girl Develop It Boulder for inviting Michael Kellman from 5430 Studio to give the workshop!

Launch GDI Project