Интерактивная SVG картограмма с помощью d3.js

[kitaisc]

Мне нравится.

[PopeyetheSailor]

Спасибо за статью, очень познавательно.

[skovorodkin]

Библиотека потрясающая. Что вытворяет с её помощью сам Майк, можно посмотреть здесь. Там не обычные примеры, а полноценные работы для The New York Times.

[KoGor]

Ага, уровень работ Майка это к чему нужно стремиться. У Jason Davies тоже есть интересные работы. Ну вообще наиболее интересные примеры Майк собирает в галерею.

[philpirj]

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

[joni]

Круто, совсем недавно такое было невозможно.

[Assorium]

к сожалению найти геокодер вроде этого gpsvisualizer.com/geocoder, чтобы он понимал русский язык- я не смог (может кто знает?)

Пользовался API Google Maps, регистрироваться не надо.
Пример: gdeteplee.ru/
Получение данных внизу файла gdeteplee.ru/js/script.js?0.1.9, объект Map, аттрибут Map.vr.geocoder. В методе Map.add() как раз получаю координаты по адресу.

Все что нужно, это подключить js файл:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

[KoGor]

Это понятно, но я имел ввиду уже готовый сервис, причём с пакетной обработкой данных, а то что API Google/Yandex Maps такую возможность предоставляют, при наличии прямых рук, я догадывался =).

[Assorium]

Вы вон сколько вещей сделали, написать пару INPUTов с парой строчек JavaScript навряд ли сильно Вас затруднит =)

[KoGor]

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

[Zoberg]

к сожалению найти геокодер вроде этого gpsvisualizer.com/geocoder, чтобы он понимал русский язык- я не смог (может кто знает?), а лезть в API Яндекс.Карт не хотелось, тем более что список маленький. Хорошо бы они сами колдунчик такой сделали, ну да ладно, отвлекся я.

Можно было использовать Nominatim . Понимает русские адреса, также умеет отдавать границы регионов в svg (kml, geojson, wkt), что сильно упростило бы задачу. Пример

[Arks]

чур тапками не кидаться, что такое getjson?

[Zoberg]

geojson же. The GeoJSON Format Specification

[tihontv]

Тег <acronym> без расшифровки — зло.

[vvzvlad]

А я-то на нем минуту мышку держал.

[KoGor]

Это такая скрытая проверка на предрасположенность к прокрастинации. Вы её успешно прошли!

[KoGor]

А это интересно, ведь расшифровка была, сейчас заменил на аналогичный <abbr> в соответствии с HTML5 — теперь всё работает. Надо бы донести как-то информацию об этой фиче до НЛО. Видимо никто особо не заморачивается на столько, чтоб аббревиатуры расшифровывать =)

[SLR436]

«Пицца против Суши» на карте России — bl.ocks.org/SLR436/5693283

[torbasow]

А зачем динамически отрисовывать карту каждый раз из JSON’а? Почему не сохранить в SVG и раскрашивать по необходимости в стилях?

[KoGor]

Вы можете сохранить SVG и раскрашивать его с помощью CSS, или вообще руками в Inkscape, если вам так угодно. Все (или почти все) SVG карты нашей страны на wkimedia сделаны именно таким образом. Если вы откроете код некоторых, то увидите какой там зоопарк и ужаснётесь. Именно поэтому здесь я показал как сделать то, что Вам нужно, а не разбираться почему часть карты отрисована через <path>, другая через <polygon>, третья ещё как-то. Это раз. Во-вторых динамическая отрисовка позволяет менять масштаб, вид проекции и много ещё чего. Но конечно же всё зависит от задач, стоящих перед вами, и вы вольны выбирать удобные вам методы.

[smarcel]

не пробовали сделать карту с динамическим разделением имеющихся данных с помощью d3.quantsize или что-то подобное? (как вот в этом примере — bl.ocks.org/mbostock/4060606).

я пробовал тоже построить такую карту для российских данных (рабочий пример вот — bl.ocks.org/quantviews/raw/ed7a710a4e81cf7a910e/), там используется модифицированная легенда тоже на основе одного из примеров Майка

[KoGor]

Quantize не пробовал, думаю это целесообразно при большом количестве пороговых значений, хотя кому как нравится. Легенда у вас выглядит классно. И поделитесь пожалуйста неужатым GeoJSON'ом раз у вас есть границы Ингушетии.

[smarcel]

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

Вот несжатый GeoJSON (26 мб) — drive.google.com/folderview?id=0BwmSbblXaJ73OGdKS3ZUYU9UeU0&usp=sharing
Исходный shp я также брал с gis-lab.info, но там были немного другие файлы (разные файлы для федеральных округов/ субъектов РФ/ муниципальных образований). Проблем с кодировками вроде тоже не возникло.

[KoGor]

Спасибо за файл, а по поводу шаблона, что-то путное выйдет только в случае одинаковой структуры данных, иначе не вижу смысла. Например, регулярный отчёт какой-нибудь. В остальных случаях проще переписать пару строк простого кода, чем копаться в сложном, добавляя «ещё один», не предусмотренный ранее вариант. Для всевозможных чартов есть вот такая надстройка над d3: nvd3.

[smarcel]

согласен, что для типовых графиков лучше использовать готовые надстройки над d3. в данном случае речь как раз идет о карте РФ и разных данных по субъектам РФ от Росстата. Сейчас карты для рабочего анализа я обычно рисую в R.

[KoGor]

Для публикаций в интернет Shiny используете? Тоже хотел разобраться в этом деле, но пока руки не доходят. Было бы здорово, если бы вы написали на хабрахабр обучающую статью на эту тему.

[smarcel]

я с Shiny эксперементировал и сделал некоторые рабочие приложения по интерактивной визуализации данных больших датасетов, но в локальном режиме, для собственных нужд. Сейчас RStudio в рамках бета-тестирования дает возможность публиковать приложения Shiny на их серверах бесплатно, но сам еще не пробовал работу c RStudio Server.
Я хотел написать статьи по R для хабра, так как похоже, многим эта тема интересна — но так как не ит-шник, то чувствую неуверенно, что могу сморозить какую-нибудь глупость. Надо это преодолеть :) кое-что публикую в блоге (http://quantviews.blogspot.ru/), включая коды анализа, но описания там не-технические (кое-что про статистику ДТП, меня эта тема тоже интересует).
Кстати, еще один интересный развивающийся проект — rCharts дает возможность публиковать интерактивные графики на основе надстроек d3 (polyscharts, nvd3, morris и другие) прямо из R. Он еще в процессе разработки, но в рабочем состоянии.

[smarcel]

и при построении карты на этих данных, наверно, имеет смысл их пронормировать на население или количество зарегестрированных ТС. Иначе получается, что данные отражают разницу в регионах, а не в показателях смертности

[KoGor]

Нормировать нужно, по-хорошему, на 1000 человек населения региона, так что да, с научной/статистической точки зрения польза от этой картограммы минимальна.

[gislab]

Всё ок, но про шифровку я ничего не понял) Какие еще болгарские кодировки… ну да ладно.

Есть пара штук, которые возможно будут полезны:

Генерализованные слои границ субъектов РФ: gis-lab.info/qa/rusbounds-rosreestr-gen.html

Границы административно-территориального деления РФ из OpenStreetMap: gis-lab.info/qa/osm-adm.html

[KoGor]

Про шифровку я тоже до сих пор не понимаю, что это было, пользовался вот этой картой Albers-Siberia. А за ссылки спасибо, да и вообще спасибо за ту работу, что ведётся сообществом GIS-Lab.

[Spyd3r]

А теперь самый интересный вопрос: а можно ли наложить эту карту на Google Maps с прозрачностью? Тогда получится просто шикарная система!

[KoGor]

Вот пример использования Google Maps вместе с D3: Google Maps + D3.

[Spyd3r]

Спасибо!

[PsiBG]

Только полез искать в интернете TopoJSON для российских регионов — наткнулся на вашу статью. Спасибо большое!

[KoGor]

Пожалуйста, кстати в следующих версиях GDAL/OGR уже должна появиться возможность работать с TopoJSON.

[MFD]

Большое спасибо за статью…
Более точные данные можн взять в 2гис
api.2gis.ru/doc/geo/search/

Идейки )
Можн же например наложить эти данные на растровую карту… например на историческую
retromap.ru/

Там все карты режутся на тайтлы и накладываются допслоем на гуглмепс

[polarnik]

Спасибо за руководство.
Для подстройки размера карты под размер окна браузера поменял расчёт ширины и высоты:

    //Сначала зададим размеры нашей SVG карты.
    var zoom = document.body.clientWidth / 960.0;
    var width = Math.round(zoom * 960),
    height = Math.round(zoom * 500);

И расчёт масштабирования (scale):

    //Зададим параметры проецирования (вспоминаем/смотрим Albers_Siberia.prj из начала статьи):
    var projection = d3.geo.albers()
    .rotate([-105, 0])
    .center([-10, 65])
    .parallels([52, 64])
    .scale(Math.round(3.0 * document.body.clientWidth / 4.0))
    .translate([width / 2, height / 2]);

И тег h1 убрал, чтобы он не сокращал полезную площадь document.body (при наличии тега и текущем способе расчёта ширины/высоты появлялся скролинг).

[KoGor]

Для расчёта масштабирования (scale) лучше использовать не магические константы, а, так называемый, bounding box. Правда для этого необходимы данные по внешним границам.

var b = path.bounds(d),
scale = 0.95 / Math.max((b[1][0] - b[0][0]) / mapWidth, (b[1][1] - b[0][1]) / mapHeight);

0.95 здесь означает, что карта будет занимать 95% холста.