</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 theHTTPS clone URLand toggling it toSSH clone URL. - Find that folder and open
index.htmlin 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.