Thursday, July 21, 2011

New Browserscope Visualizations

From the beginning of the Browserscope.org project we've wanted to come up with some visualizations that are more exciting than the compatibility tables. This week we've enabled two new ways to look at the data based on comparing browser releases over time.

The timeline visualization uses Highcharts JS which lets us plot splines with irregular intervals, a feature that several other timeline visualization libraries I looked at didn't offer. As you browse the categories on the site, you'll now get timelines above the results tables. Here's a timeline graph of Collin Jackson and Adam Barth's Security test results:

In general, things are looking up and to the right, which is a really good sign for the web. =)

You can get timeline visualization for any of browserscope's tests by hitting www.browserscope.org/timeline?category=[summary|security|richtext2|selectors|network|acid3|jskb].

Additionally, I've been working with a really awesome developer named Nihar Kabinittal on a different visualization of this data - sometimes the timeline isn't enough fun. Our primary goals were to make a graphic that would be flexible to allow comparison of multiple browsers and versions and that would be instantly grokkable by both geeks and non-geeks. So here it is - this is Modernizr's data for top desktop browsers on Nihar's evolution visualization:

Want to build your own Browserscope test or create a visualization with the data? Learn more by reading the HOWTO.