November 12, 2012
Sketches from the Swinging Swing States

Now that the election is over and there’s a bit more time, I can post some sketches I have been sitting on for a while. (Early disclaimer: sitting on them was as close to this content as I got – these are courtesy of Mike Bostock, Shan Carter and Amanda Cox. I’m just doing the manual cut-and-paste labor.)

This first sketch, from Amanda, was made with R, and it had been in her ideas folder for a while (more than six months, I think).

orig

Some brief styling of that idea in D3:

s1

s2

Then, before eventually coming back to this concept, some experimentation with other forms:

e1

e2

e3

e4

Before honing in on their final idea:

e5

h2

h3

And then just refining the view:

h5

r2

r3

And here’s the final piece:

f1

August 12, 2012
All the passes - U.S. women’s soccer

A few months ago, during the Euro 2012 soccer tournament, I remember watching the Spain-France match, and like everyone who’s ever seen Spain play, was really surprised by how easily they outpassed their opponents. I wanted to make a chart of their passes – not a network diagram of who passed to who, but a chart of where the passes themselves were. My colleague Xaquín G.V., who had done many of our soccer visualization in the World Cup in 2010, told me to talk to Opta, a company that specializes in this kind game data.

A few emails, phone calls and data monkeying sessions later, my colleague Jeremy White and I had made charts for every player, highlighting short passes, that we really liked:

spain

Alas, there was not enough time to finish it, so on the shelf it went.

But when the U.S. women made it to the Gold medal match, the code was right there to use again. Jeremy was busy visualizing the Twitter Olympics, but Xaquín and Amanda Cox pitched in some soccer knowledge and gross XML parsing so we could make and interpret similar charts. After a lot of trial and error, we had mapped all the passes for all the U.S. players over the course of the entire tournament (made using R’s basic plot and segments commands):

all the passes ever

We still needed some help understanding it, so we got in touch with Jay Cooney, an assistant coach at Stanford who had coached a some of the players on the national team. But instead of just asking him “what did you think of the games?” we were able to ask “what do these charts tell you?” Giving our source all the charts ahead of time ultimately helped us choose who to highlight and made for much more useful annotation. There certainly could have been more, but we were on a tight deadline and ultimately had to turn it around, start to finish, in about 12 hours. Here’s the final graphic, with some nice design touches from Xaquín:

final v

August 11, 2012
Why Amanda Cox should be in charge of audio

The last few seconds of the Bolt video might seem familiar to some of you, especially if you were a fan of NYT graphics in 2010 during the Vancouver Olympics. One graphic done during those Games, “Fractions of a Second: An Olympic Musical" by Amanda Cox, let users hear the difference between finishers. It was a totally new and awesome way of thinking about close results. At least, it was new to me.

Anyway, we thought it would be cool to employ a similar effect for the sprinters, so I asked Amanda for a hand. (Duh.) An hour later, she sent me a folder titled “why amanda should not be in charge of audio,” which pretty much proves why Amanda should always be in charge of audio.

This is about 20 percent of the folder but it has most of the fun ones. Also, FYI, the order of the highlights in this one is screwed up…we had to fix it later.

May 19, 2012
Amanda Cox and countrymen chart the Facebook I.P.O.

On Thursday Facebook had the third-largest I.P.O. ever. In the week leading up it, my colleague Amanda Cox spent some time thinking how to best explain and contextualize this offering to readers. What follows is a series of sketches from Amanda, who shared her project folder with me for this post, and Matt Ericson, who edited the piece.

The universe of initial public offerings is seemingly simple: about 2,400 tech companies since 1980, compiled by Jay Ritter, a professor of finance at the University of Florida.

As a first step, Amanda charted the companies by I.P.O. date (x-axis) and value at I.P.O. (y-axis), colored them by their 3-year return. (The key’s not included in her sketch, but for these purposes, know that red is bad and green is good.)

Step1

This chart’s not bad (even if, like me, you have low standards), but it doesn’t say much other than that there was a dot-com boom, that most of those companies didn’t do so well, and that Facebook is worth a ton of money.

Next, a plot of 3-year return by I.P.O. date:

Step-2

Trying to add in more nuance to this picture, shading the companies by the companies’ price-to-sales ratio at I.P.O. and including Facebook in a random position just for size:

Step4

But rather than bringing clarity, it just sort of looked chaotic, even to the seasoned chart freaks of 620 8th Avenue. So she tried another form: a histogram of 3-year returns, colored by I.P.O. date:

Step4.5

Or the same chart but piled into three time periods (not that anyone asked me, but I really like this one):

Step5

By the way, even the queen bee of statistical charting screws up that chart the first time (be conservative with your “cex” values, folks):

Step6

Another idea, vaguely reminiscent of the balloons from “Up,” is sales vs. market cap at I.P.O. colored by year. I won’t lie, I don’t get this one:

Step7

Going back to time series, which many readers are more accustomed to reading and understanding, Amanda focused on one thing that always gets talked about with IPOs: almost all of the companies have a bump in market cap after their first day of trading. So she charted the “trails” of companies over their first day on the market (a log scale makes percentage changes look the same):

Step8

The trails felt promising, so she pursued them with sales, too. (Along with some screw-ups.) Again, full transparency here, I don’t get this one either, but since there are some screw-ups in there I think we’re safe:

Step9

At this point, there were a lot of charts made, but no clear answers about form or the best things to show. Matt Ericson, eyeing the looming deadlines, looked through Amanda’s analysis and offered a compromise of sorts, related to the histogram she had generated earlier, and suggested a slightly different form:

Step10

Which turned into this:

Step11

And, ultimately, into this:

Step-12

If you’ve seen the web version, though, you know it doesn’t look like this. [Amanda thinks print graphics can be smarter than web graphics.] For one, the browser window doesn’t give us this kind of space. But the medium itself plays a part too. Online, if you’re not engaged in 10 seconds, you’re not going to stay on the page, so they needed to keep it fun. For that, Amanda and Matt got some help from three (pretty badass) colleagues: Jeremy Ashkenas, Matt Bloch and Shan Carter. Together, they made an interactive chart that stepped through a handful of the steps above, slowly explaining the dataset, with each step building on the last:

Last chart

A couple major design processes are at work in this piece. First, sketching with data is massively important. Only by looking at the data in multiple forms, from different angles, did this group of visual journalists really peel back what was most interesting about it. Here, we saw histograms, crazy arrow charts, bubble charts, time series and others – all shaded with different variables. All but one, more or less, got cut.

Second, and related, is that you go with the chart you have when the deadline comes – or that you’re only as good as the last chart you threw away. (Her words, not mine.)

To be quite honest, Amanda wasn’t thrilled with her graphics that went in the paper and online. (She is always searching for The Perfect Form, whether or not it’s there.) If the I.P.O. were delayed another week, there would be another dozen charts in the trash can and maybe something else would be the last good chart. But you go to print with the charts you have, not the charts you want. So, you know, make a lot of them.

Liked posts on Tumblr: More liked posts »