Remaking a Washington Post graph, part 3

July 30, 2011 Leave a comment

This is the third part of a tutorial for making a graph like this one on the Washington Post website, using RaphaëlJS.

Click here to go to the first part of the tutorial
Read more…


Remaking a Washington Post graph, part 2

July 28, 2011 Leave a comment

This is the second part of a tutorial for making a graph like this one on the Washington Post website, using RaphaëlJS.

Click here to go to the first part of the tutorial
Read more…

Remaking a Washington Post graph, part 1

July 27, 2011 Leave a comment

This is the first part of a tutorial for making a graph like this one on the Washington Post website. My clone of the graph will use RaphaëlJS, and unfortunately my clone doesn’t yet work in Internet Explorer; it should work fine in any other browser.

You can see the cloned graph here.

Who’s this tutorial meant for? It’s aimed at people who already know the basics of JavaScript, who have little or no experience with making visualizations from scratch, and who haven’t used RaphaëlJS. Chances are, this tutorial will sometimes be too basic, and sometimes assume too much. I apologize in advance. If you have any questions, I’d be happy to try to answer them.
Read more…

Firefox extensions tool

January 16, 2011 Leave a comment

I revisited the Firefox data that I used earlier, in order to answer this question: What per cent of users have more than X number of extensions, and what per cent less than X?  Or rather, I wanted to make an easy way for other people to answer this question.  I made a pair of graphs.  Nothing too fancy, just a histogram and scatterplot.  The histogram is for determining what per cent had exactly X extensions, and the scatterplot for what per cent had X or more and X or less.

It looks like this:

The interactive version is here.  Mouse over a bar or dot to find the per cents.  The graphs can be panned left and right by dragging on their backgrounds.

As always, it might not work in Internet Explorer.  And if it’s too big or too small you can use your browser controls to resize the page.

Categories: Graphics, Interactive

Notabilia graph

January 13, 2011 Leave a comment

There are a couple of cool visualizations at (which I found through a FlowingData post). The visualizations show the flow of Wikipedia discussions.  Specifically, the discussions deal with whether particular articles should be kept (either in their present form or modified) or whether they should be deleted. The visualizations are really nice. I hadn’t ever seen a visualization quite like this, so I wanted to try to make it. A static picture of one of the originals is below.

And here is  a static image of my clone:

The full, interactive version of mine is here.  I haven’t checked yet to see if it works in Internet Explorer.  It seems to work fine in Firefox and Chrome.

I’m using the same data set as the original but not the same data subset.  Theirs shows a strand for each of the 100 longest discussions that ultimately resulted in the article being kept.  Mine shows the same but for discussions that were between 40 and 46 messages long, inclusive, and I don’t think there is any overlap between theirs and mine.

Both theirs and mine are interactive.  If you move your cursor over a strand, it is highlighted by making the strand thicker, and the title of the article under discussion is revealed.  Theirs has the title appear at the end of the strand, with text angled, it seems, to match the ending angle of the strand.  In mine, the title appears at the top.

Categories: Graphics, Interactive

NYT Investment Graph

January 11, 2011 2 comments

[This post as was originally up on the 8th of January.  I took it down on the 10th, changed a few details (adding the static SVG, for instance), and put it back up early on the 11th.]

The New York Times put up a really interesting graph on January 2nd.  I remade the graph, adding some interactivity and changing the color scheme. Unfortunately, I don’t have the data used in the original graph, so my version is only useful as a concept. My graph is here. It requires JavaScript, and it seems to work fine in Firefox, Chrome, and Safari browsers. It also seems to work in my version of Internet Explorer, but it’s slow and doesn’t work quite perfectly. It might not work at all in Internet Explorer.

If you don’t want to enable JavaScript and you’re not using Internet Explorer, you can see a static SVG of my version, here

Here’s a snip of the original, New York Times version.

The graph is great. It’s very appealing, visually, it has a lot of interesting, unusual information, very densely presented, and the presentation is easy to understand and use. The color scheme is an unfortunate choice, though, since red-green color deficiency (“color blindness”) is the most common type of color deficiency.

Here’s a static image of part of my version.

I added two ways to interact with the graph. First, you can mouse over any square to see the (fake) data for that square. Second, the black box in the right margin can be dragged up and down to change the intended investment duration. This changes the highlighting in the main graph, and updates the bottom graph, which shows the data for all of the highlighted squares.

I’m pretty happy with how this turned out, but so far I’ve only finished about a third of what I have imagined putting in it.

Categories: Graphics, Interactive

BLS unemployment data

December 29, 2010 Leave a comment

Data from

This graph has the same data as Chart 1 on that page.

Categories: Graphics