So you want to use D3?
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.
jpeg are all raster formats, but they encode information differently. Whole other conversation.
D3 draws Vector Graphics
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 email@example.com:/c956853b0904e30d13e3.git(but … use your gist, not mine!) Get the exact string you need by looking for the
HTTPS clone URLand toggling it to
SSH 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.
Or, take a look at his stacked multiples demo and make that your next project.