Archive

Archive for the ‘Code’ Category

Remaking a Washington Post graph, part 5

August 12, 2011 Leave a comment

This is the fourth 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 4

August 7, 2011 Leave a comment

This is the fourth 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 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 visualization competition submission description

December 15, 2010 2 comments

Firefox has a competition to visualize some data they’ve collected (found through this FlowingData.com post).  After a week and a half of intense work, I have finished and submitted a visualization.  Links are below, but first: Special thanks to Rob Ploutz-Snyder and Sheila Moore for some very helpful suggestions, and Phillip Fiedler for helping me get the visualization online.  And thanks to the maker of the JavaScript library raphael.js.

If you use Internet Explorer, you can see a static version of the visualization here. I don’t think the dynamic version will work for you.  Also, the dynamic version won’t work if you have JavaScript disabled.

Everyone else (hopefully) can see the visualization, here. As you look over the visualization, keep in mind this rule: If your cursor changes from the default arrow, this indicates there is some kind of interactivity available.  The histograms can be dragged left and right to move them in their viewing windows. The proportion graphs on the right hand side have even more interactivity, but they come with their own explanation, which can be accessed by clicking on the “?” at the top.

Read more…

Categories: Code, Graphics