d3 sandwich

Abstract State Map

Step #1: Store State Data in an Array

What Data Do We Need to Create the Map?

The abstract state map looks like it's just one item, but it's actually a collection of rectangles, one per state.

How do we tell the computer where to put each state's rectangle? By thinking of the state map as a grid:

Row	0	1	2 3 4 5 6	7	8	9	10
0			...				ME
1			...			VT	NH
2	WA	ID	...		NY	MA

For each state, the computer needs to know:

The state's name (e.g., "WA")
The state's row on the grid (e.g., 2)
the state's column on the grid (e.g., 0)

Given this info, the computer knows exactly where to put the state on the map and how to label it.

Playing with the Code

This code stores the info needed to create the state map;
to make the code manageable, we are only including 6 states.

Before we explain what each line does, spend a little time playing with it. Try changing the row and/or column for several states and see what happens to the position of those states on the map.

var  stateMap = [
  { state: "ME", row: 0, col: 10 },
  { state: "VT", row: 1, col: 9 },
  { state: "NH", row: 1, col: 10 },
  { state: "WA", row: 2, col: 0 },
  { state: "ID", row: 2, col: 1 },
  { state: "NY", row: 2, col: 8 },
];

[ Link for Ben, to show what larger graphic looks like]

Variables, Arrays, and Objects:
The Measuring Cups and Sauté Pans of Cooking with Code

When you learn to cook, you pick up a whole new vocabulary: tablespoons vs cups, different types of pans, etc.

But when you're first getting started, you may not know the exact names of these tools. In fact, if someone from your family or a relative is teaching you, you may not even realize that you are using, say, a small sauté pan. You just know to use that particular pan to grill a grilled cheese sandwich just for you and maybe a larger pan if you're cooking a bunch of grilled cheese sandwiches.

In short, when you're first learning to cook, knowing the exact names is less important than picking up on the patterns behind using them – e.g., if you try to shove too many ingredients into a pan that can't fit them, either it'll turn into a mess or you'll undercook some of the food.

Below you're going to learn about some of D3's tools of the trade: variables, arrays, and objects. You don't need to understand exactly what they are right now, you just have to have a very rough sense. As you use them over & over throughout this and other recipes, you'll gradually get more comfortable with them.

We Store the Map Data in a Variable: stateMap

In D3, to store data we create a variable. We called our variable stateMap:

var tells D3 to create a variable
Why did we call it "stateMap" instead of "state map"? Because a variable's name can't have a space in it
Why is there a semi-colon ( ; ) at the end of the variable's definition? It's a little like putting a period at the end of the sentence: in JavaScript, which D3 is based on, it's how you tell the computer it's at the end of your command.

  var  stateMap = [
      { state: "ME", row: 0, col: 10 },
      { state: "VT", row: 1, col: 9 },
      { state: "NH", row: 1, col: 10 },
      { state: "WA", row: 2, col: 0 },
      { state: "ID", row: 2, col: 1 },
      { state: "NY", row: 2, col: 8 }
  ];

stateMap Is an Array

An array is basically just a list – in this case a list of the states.

We tell D3 we want to create stateMap as an array by using brackets: []
Each item in the array is separated by a comma ( ; )

  var  stateMap = [
      { state: "ME", row: 0, col: 10 },
      { state: "VT", row: 1, col: 9 },
      { state: "NH", row: 1, col: 10 },
      { state: "WA", row: 2, col: 0 },
      { state: "ID", row: 2, col: 1 },
      { state: "NY", row: 2, col: 8 }
  ];

stateMap Is an Array of Objects

Because we want to store several pieces of info for each state, each item in the array will be an object.

We tell D3 we want to create an object by using curly brackets: {}
Each piece of an object's info is called called an attribute. Our state objects have 3 attributes:

state: WA
row: 2
col: 0

If you look back at the grid at the top of the page, you'll see that this object captures all the info the computer needs to know to put the state of Washington (WA) on the map.

          { state: "WA", row: 2, col: 0 },

A Reminder: Don't Sweat It!

If you feel like you understand how the code to create stateMap works, that's great.

If you're not entirely sure, that's ok. It takes most folks a while to really understand D3 code. At this point, all you need is a very rough idea of how it works. Go back to the top of the page and play around with the states' rows and columns one more time. Then go on to the next recipe step.