sva_news

Интерактивная карта новостей норвежской районной газеты

Это мой первый пост в блоге, и я посвящу его интерактивной визуализации, хотя в дальнейшем упор будет делаться на статическую графику. Заодно проверю, как здесь работает вставка iframe.

Итак, начнём. Почти весь июль 2014 года я отрисовывал карту коммуны Сёр-Варангер (норвежский район, который граничит с Россией).

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

Однако задействовать картографию в инфографике для газеты Сёр-Варангер Авис мне практически так и не пришлось. Хотя планы были такие, что делать для статей «locator maps» — карту со схематическим изображением мест, расположением субъектов и объектов действия и т.д.

Чтобы совсем не пропадать очередной моей «китайской» работе, я решил использовать отрисованную карту для небольшого интерактивного приложения, которое бы привязывало газетные статьи за последнюю неделю с местом описываемого ими происшествия. Вот результат:

Конечно, в плане карты, здесь использована сурово генерализованная часть. Зато в техническом плане я впервые сделал две вещи.

Первая вещь — это загрузка данных из онлайн редактируемой таблицы.  В нее прямо сейчас можно зайти и поменять данные (после изменения не забудьте нажать F5 на этой странице) .

Вторая вещь — использование svg в интерактивной графике. Я не стал использовать нативный svg, а пошёл более лёгким путём, взяв javascript библиотеку snap.svg.

И вот, получилась графика с анимированными символами, выскакивающими окошками, кликабельная (с переходом на сайт газеты с соответствующей статьёй) и при всём при этом не флеш. То есть, svg можно использовать для практически любой визуализации, и, если будет необходима интерактивность, её тоже можно будет реализовать.