Moving the mouse over the graph will highlight and display the index for a given point in time. Clicking the mouse will advance to another city.

Posting this update reminds me I need to get back to reading Visualizing Data!

Oops, your browser does not have a Java Plug-in. Get the latest Java Plug-in here. Or, if you have Java but can’t use the Plug-in, feel free to download the program as an executable jar. Here’s a screen shot of what you’re missing.

I must admit, I’ve been extremely lazy about reading Visualizing Data or even updating this blog… but, this post should make up for it.

Earlier this week I skimmed a WSJ blog and article on the Case-Shiller Home Price Index and thought to myself “time for a graph!”

For the uninitiated, Case-Shiller tracks home prices in 20 metro areas. As WSJ states, “[the index has] a base value of 100 in January 2000. So a current index value of 150 translates to a 50% appreciation rate since January 2000 for a typical home located within the metro market.”

This program graphs the history of each city’s home price index. Not satisfied with just a plain-old graph, I added some aesthetic and functional features. The 20-city composite is shown for reference. Moving the mouse over the graph will highlight and display the index for a given point in time. Clicking the mouse will advance to another city.

Oops, your browser does not have a Java Plug-in. Get the latest Java Plug-in here. Or, if you have Java but can’t use the Plug-in, feel free to download the program as an executable jar. Here’s a screen shot of what you’re missing.

The graph’s data comes from a static CSV which I slightly hand-modified from the original XLS spreadsheet.

It’s interesting the number of little things I find missing or bothersome. For example, I’d like to use curveVertex() instead of vertex() for a smoother line curve, but by nature it doesn’t display the first and last data points. Fortunately there are enough data points and few large jumps/drops so the graph does not appear jagged. I could go on…

Taking a break from the book and making something useful has been fun.

I’ve been noticing that my Processing programs use a lot of CPU — about 35% on my dual-core, 2 GHz machine. And that’s for a program which just displays static data, like the one below.

Update: thanks to a helpful suggestion, I was able to decrease CPU usage significantly. To find out how, read the comments section.

Oops, your browser does not have a Java Plug-in. Get the latest Java Plug-in here. Or, if you have Java but can’t use the Plug-in, feel free to download the program as an executable jar.

This program, from Visualizing Data, plots some US beverage consumption stats over a period of time. Clicking anywhere within the app switches the subject beverage.

Unless I’m missing something, the excessive CPU usage is due to constant re-draw. The book puts all drawing code within the draw() method which is called repeatedly, up to 60 times per second (by default). Setting the frameRate() to 30 fps improves the matter, but only marginally.

As I was putting in the reference link for draw(), I noticed the documentation indicates its continuous execution can be disabled with noLoop(). That’s great, but has the side effect of disabling key or mouse events.

For now I’m willing to overlook this CPU usage “problem” but I hope the book addresses it soon.

Today marks the second week I have been learning Processing, a Java-based language for “program[ming] images, animation, and interactions.” In other words, I want to learn how to make useful, pretty graphics.

Over the past year I had seen Processing mentioned here-and-there in various articles, but what piqued my interest was a visualization of US zipcodes. Check it out; it’s awesome.

My guide, at least for now, is Visualizing Data by Ben Fry. I just completed reading the third chapter and thought I’d share an example program.

The above Processing program plots data on a US map. The data are random numbers, associated with each state, which are displayed as colored circles of varying sizes. Colors are based on sign; size based on magnitude. Moving the mouse cursor over a circle displays the state name and the random value.

Obviously, this is a very simple visualization but it’s not hard to see the potential for powerful visualizations. I’m already coming up with other data to visualize with this… such as displaying the difference between the current and average daily temperature for a state.

Oh, before you get to comfortable with that static graphic, click anywhere on the map. Neat, huh? A new random number is generated and the graphic is animated from the old value.

Over the course of this coming week I will read the fourth chapter, “Time Series,” about displaying data which changes over time. I can’t wait to see what program the book will have me work on.