Group tags, template literals, small multiples-ish

Storytime: <g> tags

This piece on Dashing D3 does a great job explaining group elements, but I'm just going to give you one of the very basic ideas in like six seconds.

Let's say I have a few circles, nothing crazy.

<svg width='200' height='100'>
  <circle cy='25' cx='25' r='20' fill='pink'></circle>
  <circle cy='25' cx='75' r='20' fill='pink'></circle>
  <circle cy='25' cx='125' r='20' fill='lightblue'></circle>
  <circle cy='25' cx='175' r='20' fill='lightblue'></circle>
</svg>

If I wanted to move the pink ones down a bit, I could go ahead and change their cy values.

<svg width='200' height='100'>
  <circle cy='75' cx='25' r='20' fill='pink'></circle>
  <circle cy='75' cx='75' r='20' fill='pink'></circle>
  <circle cy='25' cx='125' r='20' fill='lightblue'></circle>
  <circle cy='25' cx='175' r='20' fill='lightblue'></circle>
</svg>

But since this is a demonstration of the <g> group element, it isn't going to be that easy! Maybe you have TEN THOUSAND of those little pink circles you gotta move, and it's going to be a pain to do each of them individually.

So hey, if they're both pink, they're both moving together, they're kind of doing the same thing, it would make sense to put them in a group, yeah? That's the g element.

<svg width='200' height='100'>
  <g>
    <circle cy='25' cx='25' r='20' fill='pink'></circle>
    <circle cy='25' cx='75' r='20' fill='pink'></circle>
  </g>
  <circle cy='25' cx='125' r='20' fill='lightblue'></circle>
  <circle cy='25' cx='175' r='20' fill='lightblue'></circle>
</svg>

Nothing changed, obviously, but let's say I wanted to move them down again. Instead of changing each of the circles' cy values, I can just transform the g.

<svg width='200' height='100'>
  <g transform="translate(0,50)">
    <circle cy='25' cx='25' r='20' fill='pink'></circle>
    <circle cy='25' cx='75' r='20' fill='pink'></circle>
  </g>
  <circle cy='25' cx='125' r='20' fill='lightblue'></circle>
  <circle cy='25' cx='175' r='20' fill='lightblue'></circle>
</svg>

Tada! Everything inside of that group was moved 0 pixels on the x axis and 20 pixels on the y axis. Great, cool, perfect. That's a g, that's transform, congratulations.

Now when you have like 10 minutes just go read that page and learn it a lot more in-depth.

Storytime: Template Literals

If you look at my code this time around, you're going to see a lot of stuff with weird backticks — that's the ` characters — such as `translate('${margin.left},${margin.top}')`. We used them for a hot second last class, but I thought we should take a moment to really look at them.

The backticks (`) and the ${} stuff is new for JavaScript. They're technically called template literals. They let you do fill-in-the-blanks with strings instead of having to add strings and numbers and stuff together.

To do fill-in-the-blanks, you'll do `My name is ${name}` instead of "My name is" + name. For example, let's look at how we set margins on our SVG.

Old version:

.attr('transform', 'translate("' + margin.left + ',' + margin.right + '"')

New version:

.attr('transform', `translate('${margin.left},${margin.right}')`)

It's a little more complicated since you're using weird characters and ${} is very very wiggly, but we'll (probably) survive.

Chart 1: What's a <g>? + margin convention

Toggle circle coordinates

Chart 2: Using <g> tags instad of x and y

Typically we position something with x and y (or cx and cy). We can also use a g tag + transform/translate to push things around instead.

Chart 3: Using <g> tags to space out complex graphics or small multiples

We did this one at the end of last class! We need to fix up the axis lines, though.

Chart 4: g elements for fun and profit

We're going to recreate this NYT piece because it's BROKEN! It's from 2009 but hey, there's new data, right?

We'll also learn how legends work.

Data is in weekly_earnings.csv

Chart 5: Small multiples, but... different

You don't need every single graphic to be exactly the same when you're doing small multiples. Let's reproduce this piece from the NYT about BMI differences between men and women.

Also, we're drawing two separate svg elements instead of using g tags this time!

Data is in bmi-fat.csv