RocketFoo

The Project

See it live. And don’t use IE. I haven’t tested it and I’m not going to!

The Story

In 2010, I rebuilt my website. As usual, I overloaded this project with far too many technology changes, forcing me to learn tons of new stuff before I could do any real work. I also fell into the worst client trap of being perpetually unsatisfied with any design I produced. Nevertheless, I trudged on, and finally decided it was decent enough to launch in March.

One of the new features was the Ephemera section, which was rushed out the door at the last minute, but turned out to be the best addition to the site. The idea was to start tracking little memorable bits of my life — items that would otherwise be lost in time. I have a terrible memory, and I’m finding that my once-reliable Internet footprints are getting more and more fragmented across many different services. Back in the good old days (i.e. 2 years ago), you could just read your email archives and remember everything that happened.

The Ephemera page does two things. First, it provides simple statistics about my various web activities. Second, it displays a record of my actual, physical life, which means that I’m required keep a fairly minimal daily log of what happens. I had zero confidence that I could maintain even the most rudimentary task on a daily basis, so I kept it dead simple: a one-line text annotation, and a quantitative (0-10) ranking of the day in four categories: Mood, Workload, Sunlight, and Sleep.

So, what did I learn?

1. Merely logging into a website, choosing four numbers, and writing a one-line sentence every day is incredibly hard to keep up. Feltron has the right idea by “outsourcing” the data collection.
2. If you miss a day, or a week, you won’t remember what the hell happened yesterday — let alone last Tuesday.
3. Life is filled with countless meaningless interactions and uninteresting chores. Some days memorable things happen, and other days you eat pancakes and clean up cat barf.
4. It’s hard to be quantitative about your life. As an example, should my daily Sleep entry be an exact representation of the number of hours I slept, or should it be qualitative relative to how tired I really feel? It’s a judgment call.
5. Trends confirm that moderation is good. Big surprise, mood plummets as workload nears maximum!

How it works

I’ve been dreaming about doing native/live data visualization on the web for years. The technology is finally coming around; there are numerous libraries and tools available that do in-browser charting, using either SVG or the <canvas> element to render the charts. I tried almost all of these and settled on Highcharts for this project, as it was the fastest way to get some decent output.

The data is stored in Symphony and is sent either directly to the browser and rendered by a Highcharts script, or it’s output as JSON and then retrieved via a jQuery AJAX call, which is then passed to Highcharts. The Frequently Noted chart is custom designed using <div> elements with large CSS3 border-radius values. I do quite a bit of tinkering with the data and almost all of this happens in Symphony’s XSLT layer, and I used several EXSLT functions to do string tokenization, math, and other mundane stuff.