As a program manager, I often need to show high-level milestone charts in my presentations. These “roadmaps” usually contain dates for events, key development milestones, and other dependencies related to the project or program.
When @brianleroux tweeted about Envision.js, a library for creating fast, dynamic and interactive HTML5 visualizations, I took a look. Envision.js is built on Flotr2, a very cool visualization library. Envision.js didn’t do exactly what I wanted, but I figured that with some modifications I could modify it to do what I wanted. So I forked it and gave it a try! It’s still a work in progress, but I’ve got it to a place where it can practically be used, although it’s still not as elegant as I’d like. Below is a screenshot.
Since this is based on Envision.js, you can also interact with the roadmap – by zooming in to certain areas of time, or zooming out to get a bigger picture of what’s going on. Here’s a quick screencast of the interaction.