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].

This visualization also works for User Tests, which makes for some pretty cool graphs - check out the Modernizr timeline and their full compatibility table with automatic scoring and cell highlighting.

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.

4 comments:

Smash said...

It would be nice to reset text selection after dragging a table in Chrome

Something like this will do:


(function() {
var clear = function () {
window.getSelection().empty(); // chrome
};

document.querySelectorAll('.bs-timeline svg')[0].addEventListener('mouseup', clear, false);
});

Smash said...

It'd be nice to clear text selection after zooming a chart.

Something like this will do:

(function() {
var clear = function () {
window.getSelection().empty(); // chrome
};

document.querySelectorAll('.bs-timeline svg')[0].addEventListener('mouseup', clear, false);
});

nimbupani said...

One quibble is that it seems to compare all stable browsers against a dev release of Chrome, which seems to be an unfair comparison.

elsigh said...

@nimbupani - Updated that, thanks for the feedback.