В прошлом создание интерактивной визуализации данных могло быть сложной и зачастую трудоемкой задачей. В Интернете можно найти множество примеров людей, создающих потрясающие визуализации данных, на создание которых могут уйти недели или даже месяцы. В условиях стремительного роста объемов данных возникает необходимость быстро построить сложную визуализацию за пару дней, часов или даже минут. В приведенном ниже руководстве мы покажем вам, как можно использовать Datamatic API для создания интерактивной визуализации менее чем за час.

Эта визуализация покажет среднюю цену во всех внутренних районах Лондона между 1995 и 2015 годами, используя Datamatic в качестве визуализации диаграммы, Briskat для API данных, dat.GUI для элементов управления пользовательского интерфейса и JSFiddle. разместить этот пример.

Демо: http://jsfiddle.net/jarben/kbphv1pb/

Datamatic

  • Зайдите на сайт Datamatic и оформите бесплатный тариф.
  • Как только вы войдете в редактор, выберите диаграмму «Карта» и нажмите OK.

Ваш график должен выглядеть следующим образом:

Карта Лондона не является частью наших примеров диаграмм, поэтому нам нужно найти внешний London GEO JSON и использовать его в свойстве map-type. Мы собираемся использовать карту, размещенную на GitHub:

Https://raw.githubusercontent.com/jarben/london_geojson/master/london_postcodes.json

Теперь мы можем удалить данные по США и добавить фиктивные данные для проверки нашей диаграммы.

Это почти все, что нам нужно сделать для начала, поэтому теперь мы можем опубликовать эту диаграмму, которая предоставит вам образец кода Javascript в разделе API:

JS Fiddle

Перейдите на сайт JS Fiddle, вставьте этот код в раздел HTML и запустите следующий код:

Мы предлагаем вам переместить весь код javascript в редактор JS и переместить теги сценария в ресурсы JSFiddle:

Брискат

API данных для этого примера любезно предоставлен компанией Briskat. Их сверхбыстрая аналитическая база данных способна почти мгновенно реагировать, что дает нам ощущение почти на стороне клиента для большинства запросов. Чтобы узнать больше, загляните на веб-сайт Briskat. Мы собираемся установить данные с их конечной точки API:

Datamatic.ajax.json("http://house.briskat.com/api/p/lruk/r/area", {
    yr: 2015, // year
    dim: "pcdistrict", // set post code level to disctrict
    pc: 1 // 1=inner London area
}).then(function(data) {
    chart.setData(data.map(function (item) {
        return {
            name: item[0],
            value: item[2]
        };
    }
));
});

Это дает нам реальные данные на карте и позволяет пользователям фильтровать области, используя компонент минимального / максимального диапазона данных:

Вернемся к визуальному редактору и установим некоторые свойства, такие как:

  • тема "рома"
  • заголовок, текст ссылки и стиль
  • включить всплывающую подсказку
  • настроить диапазон данных, который будет располагаться слева и т. д.

Вы должны увидеть что-то вроде этого:

Когда вы снова опубликуете и запустите свой пример JSFiddle, вы должны увидеть следующую карту:

Следующий этап - добавление элементов управления. Мы собираемся использовать для этого легкий контроллер dat.GUI, но вы можете выбрать любые другие виджеты или простые элементы HTML.

  • Создайте простой контроль года
// create control panel
var gui = new dat.GUI();
// options data model
var options = {
    year: 2015
};
// add year range
var yearControl = gui.add(options, 'year', 1995, 2015);
// update data when yearControl changes
yearControl.onChange(updateData);

Заменить значение параметра в запросе:

yr:2015 // year

by:

yr: parseInt(options.year), // year

Теперь у вас должна быть карта, на которой изменение года запускает HTTP-запрос и обновляет карту:

Следующая функция упростит добавление новых параметров, а также добавит немного оптимизации к элементам управления:

function addController() {
    var controller = gui.add.apply(gui, arguments);
    var delayedTask = Datamatic.utils.delayTask(updateData);
    controller.onChange(function () {
        // wait 50ms before updating the map, this prevents large number of request if user moves sliders
        delayedTask.delay(50)
    });
}

Формат результатов API данных: [post_code, num_of_properties, average_price, year_over_year]. Мы также можем добавить еще одну опцию на панель управления, которая изменяет метрику, показанную на карте:

addController(options, 'metric', {
    "Num of properties": 1,
    "Average Price": 2,
    "Year over year": 3
});

и используйте эту опцию при установке данных:

var metric = options.metric;
chart.setData(data.map(function (item) {
    return {
        name: item[0],
        value: item[metric]
    }
}));

Вот результаты нашего последнего изменения: