Interactive area chart using Protovis

Formatting data: The first step is to get it into JSON, using some external tool (I really like Google Refine for this, though it's a pretty big tool if this is all you need it for - try Mr. Data Converter for a quick and dirty option). These tools will probably give you data as a JSON object, like this:

`[{"Province":"A", "Year":"1970", "10":2, "100":4, "1000":6, "10000":3}, ...]`

Once you have the data available as JSON, you'll want to get it into shape for your vis. You're going to want to pass each pv.Area an array of values - from your description it looks like you want the [10, 100, 1000, 10000] values. Protovis has a lot of tools for manipulating data - see the pv.Nest operator. There are lots of ways you might approach this - I might do this:

data = pv.nest(data)    .key(function(x) {return x.Province})    .key(function(x) {return x.Year})    .rollup(function(v) {        return [v[0]['10'], v[0]['100'], v[0]['1000'], v[0]['10000']];    });

which gives you an object like:

{     A: {        1970: [2,4,6,3]        // ...    },    // ...}

This sets you up for the interface elements. Keep the array of checked Provinces and the current year in global variables:

var currentProvinces = ['A', 'B', ...];var currentYear = 1970;

and set up your area to reference those variables:

// a containing panel to help with layout and datavar panel = vis.add(pv.Panel)    .data(function() currentProvinces); // making this a function allows it to                                         // be re-evaluated later// the area itselfvar area = panel.add(pv.Area)    .data(function(province) data[province][currentYear]);    // plus more area settings as needed

Now use some other library - I'm partial to jQuery, with jQuery UI for the slider - to create your interface elements. The onchange function for each element just needs to set the corresponding global variable and call vis.render() (assuming your root panel is called vis). This should be pretty simple - see here for a Protovis example using jQuery UI to make a time slider very similar to what you have in mind.

I think that you are trying to make that pair of charts:

http://mbostock.github.io/protovis/ex/zoom.html