Интерактивная диаграмма области с использованием протовиса

Question

Это довольно пугающий проект для новичка Protovis, но, возможно, вы могли бы помочь мне разделить его на усваиваемые куски?

Что я хотел бы построить, так это «интерактивная диаграмма области», как наброски здесь:

Прежде всего, это данные ... У меня есть данные для провинций в Excel:

Province   Year  10  100  1000  10000 
A          1970  2   4    6     3 
A          1971  3   6    8     5 
B          1970  6   9    12    6 
B          1971  4   8    11    8 
....       ...   .   .    .     .

Для каждой провинции и года я хотел бы иметь возможность нарисовать таблицу территории:

vis.add(pv.Area) 
    .data(data.ProvinceA[1970]) 
    .bottom(1) 
    .interpolate("basis") 
    .left(function(d) x(d.x)) 
    .height(function(d) y(d.y)) 
    .fillStyle("rgb(21,173,210)") 
    .anchor("top").add(pv.Line) 
    .lineWidth(3); 

Тогда я хотел бы добавить 2 типа интерактивности:

1. Выбор провинции
2. Слайдер времени

Вместе флажки выбора и слайдер времени определяют, какие области видны в любой момент времени. Если, например, провинция A выбрана, а год - 1984, только эта область отображается. Если слайдер времени перетаскивается, соответствующие годы в настоящее время отображаются для провинции A. Если проверена другая провинция, области накладываются, и обе области перерисовываются при движении ползунка времени.

Вопросы протовиса:

1. Как форматировать данные (провинция, год, x, y) для этого приложения?
2. Как мне достичь привязки флажок к области?
3. Как внедрить слайдер времени? В Protovis или как внешний компонент со слушателями, которые запускают повторное возмещение графика?

Answer 1

Форматирование данных: Первый шаг - попасть в JSON, используя какой -то внешний инструмент (мне очень нравится Google уточняет Для этого, хотя это довольно большой инструмент, если это все, для чего вам нужно - попробуйте Г -н данных преобразователь для быстрого и грязного варианта). Эти инструменты, вероятно, дадут вам данные как объект JSON, например, это:

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

Как только у вас есть данные в качестве JSON, вы захотите получить их в форме для вашего VIS. Вы захотите передать каждому pv.area массив значений - из вашего описания, похоже, вы хотите, чтобы значения [10, 100, 1000, 10000]. Протовис имеет много инструментов для манипулирования данными - см. PV.nest оператор. Анкет Есть много способов, которыми вы могли бы подойти к этому - я мог бы сделать это:

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']];
    });

который дает вам объект, подобный:

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

Это устанавливает вас для элементов интерфейса. Держите массив проверенных провинций и текущего года в глобальных переменных:

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

и настройте вашу область, чтобы ссылаться на эти переменные:

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

Теперь используйте какую -то другую библиотеку - я неравнодушен к jQuery, с jQuery UI для ползунка - для создания ваших элементов интерфейса. Функция Onchange для каждого элемента просто должна установить соответствующую глобальную переменную и вызов vis.render() (При условии, что ваша корневая панель называется vis) Это должно быть довольно просто - посмотрите здесь Для примера протовиса с использованием пользовательского интерфейса jQuery, чтобы сделать слайдер времени очень похожим на то, что вы имеете в виду.

Answer 2

Я думаю, что вы пытаетесь сделать эту пару графиков:

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