Интерактивная карта местности с использованием Protovis - PullRequest
Новая
       35

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

4 голосов
/ 23 января 2011

Это довольно сложный проект для новичка 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 или как внешний компонент со слушателями, которые запускают повторную визуализацию графа?

Ответы [ 2 ]

6 голосов
/ 01 февраля 2011

Форматирование данных. Первый шаг - это вставить их в JSON, используя какой-то внешний инструмент (для этого мне действительно нравится Google Refine , хотя это довольно большой инструмент, если это все, что вам нужно - попробуйте 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 UI для слайдера - для создания элементов интерфейса. Функция onchange для каждого элемента просто должна установить соответствующую глобальную переменную и вызвать vis.render() (предполагается, что ваша корневая панель называется vis). Это должно быть довольно просто - смотрите здесь для примера Protovis, использующего пользовательский интерфейс jQuery, чтобы сделать бегунок времени очень похожим на то, что вы имеете в виду.

0 голосов
/ 04 августа 2014

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

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

...