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

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

Я хотел бы построить «интерактивную диаграмму с областями», как показано здесь: http://i.stack. imgur.com/7bs9W.png

Во-первых, это данные... У меня есть данные по провинциям в 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. Ползунок времени

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

Протовис вопросы:

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

javascript json visualization protovis
person dani    schedule 23.01.2011    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Форматирование данных: первый шаг – преобразовать их в формат JSON с помощью внешнего инструмента (мне очень нравится Google Уточните для этого, хотя это довольно большой инструмент, если это все, для чего он вам нужен — попробуйте Mr. Data Converter для быстрого и грязного варианта). Эти инструменты, вероятно, предоставят вам данные в виде объекта JSON, например:

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

Как только у вас будут данные в формате JSON, вам нужно будет привести их в форму для вашей визы. Вы захотите передать каждому pv.Area массив значений - из вашего описания похоже, что вам нужны значения [10, 100, 1000, 10000]. Protovis имеет множество инструментов для манипулирования данными — см. оператор 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 для слайдера — для создания элементов интерфейса. Функция onchange для каждого элемента просто должна установить соответствующую глобальную переменную и вызвать vis.render() (при условии, что ваша корневая панель называется vis). Это должно быть довольно просто — см. здесь пример Protovis, использующий jQuery UI для создания ползунок времени, очень похожий на то, что вы имеете в виду.

person nrabinowitz    schedule 01.02.2011
comment
Действительно отличный ответ! Спасибо. - person dani; 02.02.2011

arrow_upward
0
arrow_downward

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

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

person ssoto    schedule 04.08.2014