Newsweek Career Tree Visualization with RaphaelJS and Burst

Today, Newsweek.com launched its brand new Career Tree Visualization tool (link now defunct, but check out this demo visualization of Barack Obama’s career), which was developed at Bocoup. Career Tree is a vector based RaphaelJS/Burst visualization of your career – you can activate it by connecting with your LinkedIn account or by filling out a Career Tree form. Visitors can also enjoy a preview of the Career Tree by viewing the careers of notable public figures.

We selected Raphaeljs to manage rendering the visualization because it offers a graceful cross-browser experience, using SVG whenever possible and VML in Internet Explorer 7 and 8. To run parallel animation timelines, we used our own Burst Core JavaScript animation library. Burst Core is an Open Source Bocoup project that has been used in several active production projects.

We were excited to be able to support older versions of Internet Explorer, while still pushing the limits of web browser technology for this project. We were even able to offer progressive enhancements for Android, iPad and iPhone devices, where the hover behavior also responds to touch.

The Career Tree visualizes your career as a tree. The lower branches represent your education while the upper branches represent your employment career with each leaf representative of positions you’ve held. The diameter of each leaf corresponds to the number of years spent at that position.

It was an honor to work with the online team at Newsweek. Mark Catalano, lead developer, and Jason Diamond, project manager, from Newsweek did an outstanding job overseeing the project, and implementing our work. Hats off to Mark, Jason and their team.

At Bocoup, we look forward to more projects like this one where we can work with outstanding creative teams to develop ideas into realities with cutting edge technologies for the modern web.