adam wagler

Data Viz: D3 Expirementation and First Impressions


A colleague recently pointed me to a js library for data visualization called D3 (Data-Driven Documents). What is the best way to learn? Dive right in. I tell my students Google is your best friend so I started with search terms “getting started with d3” and “d3 tutorials.” Things I stumbled upon included:

  1. – where it all starts from Michael Bostock, but has great documentation and examples to look at source code
  2. Making a Bar Chart Tutorial – “Aligned Left” has a very good walk through produced by Scott Murray (a code artist, which is awesome by itself)
  3. D3 for Beginners were videos that help me wrap my head around what was going on and how it works:

Part I: Joe Golike gave a nice introduction

Part II: Vadim Ogievetsky walks through examples and the basics of D3

What I came up with is super rough, but I took my monthly biking mileage from the last two years. The bars are the current year and the line is the previous year to compare. It is essentially a mash up of information from the links above. Nothing special, but has given me a general understanding of the possibilities with D3. Below is a link to the project:
D3 Expirement
On GitHub:

I should mention my background is in front-end web design so am familiar with HTML/CSS and have poked around with SVG and JS/jQuery. D3 is super cool in that it is easy to follow –  next is to experiment with ways to expand on this working on visualizing the academic research that myself and colleagues produce to make findings/results more accessible.  Definitely a lot of fun and excited to hack together more visualizations.

a wannabe “code artist”

Leave a Reply