Choropleths are cool.

But they don’t communicate information very well. (See here, here, and here as some beginning reading.) Smart people talk about this issue, and make cool alternatives to address problems.

Election season brings all sorts of visualizations using regular old maps, equal area, adjusted area, and many others. I wanted to make something I hadn’t personally seen before, but I thought would be cool.

In the choropleth below, red/blue denotes which party the state voted for in the last Presidential election and contrast denotes number of Representatives in Congress.

Does Texas have more Congresspeople than California? I know because I payed attention in high school, but I can’t tell from this map, especially because the colors are different. And Florida looks maybe darker than New York? Are there more Floridians than New Yorkers in the House?

The problem is we’re looking at 3 different variables all at once: land area, population, and politics.

In election season, we don’t really care about land area.

So let’s start by looking at just one: representatives in Congress (population).

Sort by number:

Super clear and easy to read. We might as well bring back one of those variables:

This gives me more information, in a more readable format, but I still like that map above. I’m used to looking at maps and that makes it fast and easy to figure out which bar/dot represents which state.

Let’s make a Cartograph and get some of that mojo back!

We’ll start by drawing a circle at the centroid of each state:

Size the circle according to how many seats in Congress:

And color appropriately:

That’s a little busy. Since we don’t actually care what the borders look like for this exercise We’ll get rid of them.

Very cool. Abstract. But still a little busy up in the Northeast.

Luckily, D3 is super flexible. We can make this into a force diagram, which will let the circles to ‘position themselves’ away from other circles.

Which will brings some neato effects:

And some interactions, both helpful and moderately useless:

How about some sort of sticky interaction on clicking?

And now we have a way to create a diagram of US states that keeps some geographic realism and has the freedom to encode dots size and color according to whatever we want. With fun interactions. D3 is so rad.

I know this didn’t really address those Texas/California New York/Florida questions I raised earlier, but wasn’t this fun? Anyway, the point was to make a widget that was fun to click on and look at.

Let’s spend a few minutes with Google/Wikipedia/Excel, keeping our color scheme:

Try it out for yourself, and if this is your sort of thing, there’s always room for improvement.

Show your support

Clapping shows how much you appreciated Tyler Field’s story.