12 May 2015
Sandy Dog Loves Beach Zoom Way In </p>

So you want to use D3?

D3 is a powerful javascript library that lets you draw vector graphics on the fly.

Vector v. Rastor

What, is a vector graphic?

In geometry a vector is anything with length (or magnitude) and direction. So what does that mean for graphics? Look it up!

A raster graphic on the other hand is more of a pixel map. It does a great job of capturing the information in a photograph, with shading and nuance, but it isn’t a very efficient way to define a sold blue bar, for instance.

This is way oversimplified, but it is still a useful starting point. png, gif and jpeg are all raster formats, but they encode information differently. Whole other conversation.

D3 draws Vector Graphics

We just want to make a basic chart, probably a basic bar chart to start with.

Note: you’re actually seeing a pretty cool feature of bl.ocks that we haven’t much touched on. Look at how it treats a file called Readme.md. Neat, huh?

But let’s take a look at these pieces. The easiest way to start with any new tool is to take something that already works, and tweak it. So let’s do that:

  • Fork Bostock’s Demo on gist
  • Edit the Read Me – put something in there about who you are and what you’re up to.
  • Swap out the data. Use Rachel and Pedro’s deferred action eligibility data instead.
  • Check it out in -- we've obviously got some work to do. Because we've all worked out that gist and bl.ocks have a hard time staying in sync, we're going to work locally. So your next step is to...
  • Open your terminal
  • Clone your gist with git clone git@gist.github.com:/c956853b0904e30d13e3.git (but … use your gist, not mine!) Get the exact string you need by looking for the HTTPS clone URL and toggling it to SSH clone URL.
  • Find that folder and open index.html in a text editor. And a web browser. You’re going to toggle between these.
  • ctrl s, to save ctrl tab to switch windows ctrl r to reload. You’ll work so much faster once you get that down.

Bostock is doing some proof of concept stuff here. You’ll notice he doesn’t have a <head> on his page, for instance. We’ll leave that for now, and focus on getting the chart itself working. But don’t take too much of a lead from him.

  • Walk through the original code and let’s look at what it is doing.
  • Look at line 60. What does return key !== "State"; mean? (Hint: look back at his original data)
  • Where is this chart calling on information by state? Talking about ages? Let’s rename those variables.
  • How would you swap the colors out to get Pedro and Rachel’s Yellow and Red? Use the element instructor to find those colors. #CC3635 and #FFD200.
  • We’re getting close, but there is a reason that the orginal has horizontal bars. I had to do some reading – I couldn’t see an obvious way to re-jigger this as a horizontal chart. So I asked the internet.

When you’re done, you can walk through this bar chart tutorial or that one start working your way through an actual book about D3.

Or, take a look at his stacked multiples demo and make that your next project.

Note: there are a few not bad tools out there that can help you put together a D3 chart, but eventually you’re going to have to start learning javascript if you want real control.

CUNY Graduate School of Journalism

© Spring 2015 Amanda Hickman