Build high level roadmaps easily with Roadmap.js

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.

I previously used Powerpoint to manually create roadmaps and make them somewhat pleasing to the eye and easy-to-read.  This was pretty painful – because every time a date changed, I needed to hand update the milestone markers, labels, and overall chart.  When we started to use html to build our presentations, things got even more time consuming.  So I started looking for a JavaScript library that could help me easily create and update html-based roadmaps. I found a couple of projects that looked like they had potential, including Timeline, but these are focused on reviewing material that happened in the past, and usually more about being interactive – with pictures and/or very small text.  That doesn’t necessary work well for a presentation.

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.



You can play with the work-in-progress by forking it on Github. My next steps are to deal with marker labels when the markers are too close together. Also, I want to make sure that most, if not all, of the visual attributes can be controlled via CSS, or at least in CSS + one JavaScript file. Please let me know what you think, and feel free to contribute!

Comments are closed.