— И. П.

Визовая статистика 2003—2012

Tue, 23 Apr 2013 19:10:55 +0400

Одно изменение по сравнению с прошлым годом — в европейский отчёт на этот раз не попали страны вне Шенгена (Болгария и Румыния).

Меньше ста тысяч виз выдали: Словения (54 % в России), Люксембург (50 %), Мальта (46 %), Словакия (23 %) и Дания (15 %).

Old news graphics

Thu, 14 Mar 2013 22:50:12 +0400

Запустил мини-блог про информационную графику в старых американских газетах (конца XIX — начала XX века): http://oldnewsgraphics.tumblr.com/

Результаты ЕГЭ 2010—2012 по школам Санкт-Петербурга

Thu, 07 Feb 2013 14:08:27 +0400

http://ivanpoukhkal.ru/interactive/ege/

Использованные библиотеки:

Chosen, с учётом изменений, внесённых по рецепту с хабра.
JQuery.
JQuery CSV.
Raphael.
Underscore.

Если кому-нибудь интересно сравнение результатов по русскому и математике между собой:

Ведущие авикомпании России 2000—2012

Wed, 30 Jan 2013 19:04:37 +0400

Адаптация диаграммы на аналогичную тему из «Нью-Йорк Таймс».

Биатлонный календарь 2012-13

Sat, 24 Nov 2012 15:02:54 +0400

http://ivanpoukhkal.ru/biathlon/biathlon2012-13.pdf

Три карты петербургских наводнений

Wed, 31 Oct 2012 22:07:20 +0400

Освещая последствия урагана «Сэнди», «Нью-Йорк Таймс» опубликовала карту, показывающую какие области Манхэттена будут затоплены при разных уровнях поднявшейся воды. Из подобных схем наиболее известна венецианская, сделанная «Нэшнл Джеографик» и получившая приз за лучшую карту на «Малофее» 2010 года.

Мне стало интересно: а есть ли такие же карты для Петербурга? Найти удалось только три, но зато по одной из каждого века.

XIX век, план самого масштабного (4,2 метра выше ординара) наводнения в истории города

Крупнее, 11 МБ.

1900 год, карта из Брокгауза и Ефрона, изображающая разные уровни затопления

Крупнее, 1 МБ.

Современность, модель в ГИС «Наводнения» в стиле «привет из девяностых»

Интерактивная версия, с возможностью подобрать желаемый уровень.

Интерактивная карта на основе Kartograph.js

Mon, 17 Sep 2012 20:07:09 +0400

http://ivanpoukhkal.ru/interactive/flights/

Cделано с помощью джаваскрипт-библиотеки Kartograph.js Георга Айша, предназначенной для создания интерактивных векторных карт на основе SVG. Её основная «фишка» — в поддержке различных картографических проекций.

Рассказ автора о том, почему он решил создать «Картографа».

Данные

Чтобы не тратить много времени на подготовку геопривязанных данных, я решил ещё раз обратиться к авиационной тематике. Я знал, что на openflights.org ведётся база данных аэропортов с их географическими координатами, так что оставалось подобрать что-нибудь связанное с перелётами между ними. В августе как раз свернула работу авиакомпания Wind Jet и я решил нарисовать европейские маршруты «схлопнувшихся» в этом году перевозчиков пассажиров.

Первоначально я думал собрать данные по двум-трём авиакомпаниям вручную, но на том же openflights оказалась база маршрутов по состоянию на январь 2012 года, так что препятствий к рисованию всех линий не было. Количество самолётов к моменту прекращения деятельности я взял из Википедии. Ещё по Википедии я уточнил названия некоторых аэропортов (например, чешский аэропорт «Брно—Туржаны», который в базе назывался просто «Туржаны»). Там, где возможно, я уточнил действовавшие расписания авиакомпаний по Airline Route и FlightMapper.

Все три таблицы (аэропорты, маршруты и авиакомпании) были сохранены в CSV (50 КБ в сумме).

Внутреннее устройство библиотеки

«Картограф» отвечает за географическую часть работы: преобразование координат из широты и долготы в абсциссу и ординату рисунка в соответствии с выбранной проекцией, а также умеет наносить данные по нескольким типовых решениям: с кругами или иконками в заданных точках, либо с кодированием цветом регионов в зависимости от данных (то, что по-русски называют картограммой, а по-английски — choropleth map).

Непосредственно для рисования SVG в браузере для работы требуется подключить «Рафаэль» — в результате все элементы карты являются объектами «Рафаэля» и интерактивность обеспечивается именно возможностями этой библиотеки.

Также использованы

jquery;
arc.js — для расчёта ортодром, кратчайших линий между точками земного шара;
jquery-csv — для чтения данных из CSV-таблиц;
underscore.js — незаменимая библиотека для работы с коллекциями в функциональном стиле.

Общий размер скриптов: 277 КБ (библиотеки в минифицированном виде) + 11 КБ (относящийся к созданию конкретно этой карты).

Начало работы

«Картограф» на входе понимает SVG-файл с географическими метаданными: в какой проекции карта и каковы 2 широты и 2 долготы, ограничивающие рисунок по краям. Есть два пути получения такого файла: (а) взять обычную SVG-карту, узнать проекцию и проставить ограничения в файл вручную, (б) воспользоваться написанном на Питоне скриптом kartograph.py, который сделает из шейп-файлов с геоданными SVG-карту с уже прописанной метаинформацией. При работе с ним также можно указать желаемую проекцию на выходе или какие объекты включать в итоговую карту.

Я выбрал путь (б) — в конце концов, библиотеку-то мы выбрали именно из-за большого количества проекций. Найти шейп-файл для обзорной карты Европы — дело несложное, достаточно просто взять файлы Natural Earth в нужном масштабе, где уже прописаны коды стран и регионов (впрочем, на моей карте со странами манипуляций нет, так что коды тут не понадобятся).

Предлагается автоматическая установка, которая на Маке работает ровно до того момента, когда ей требуются установленные Command Line Tools. Точнее, эта причина устанавливается позже, сообщение выдаётся немного другое: «AAA не нашло BBB». Вариантов два: либо поставить весь XCode, либо найти дистрибутив только с этими Command Line Tools (я смог).

Потом я смог это сделать ещё раз, поскольку попутно обновился с Льва Обычного до Льва Горного и всё установленное питонное хозяйство слетело.

В итоге CLT (cltools_mountainliondp2_march12.dmg) были приняты благосклонно и установка завершилась успешно.

Преобразование управляется конфигурационным файлом (в yaml или json-формате). Вот, например, мой для «спутниковой» проекции (вид со спутника, висящего над определённой точкой земной поверхности):

proj:
    id: «satellite»
    «lon0»: 13.5
    «lat0»: 50
    «dist»: 1.52
layers:
— id: «countries»
  src: shp/ne_50m_admin_0_countries.shp # шейп-файл
  simplify: false # не упрощать SVG-пути
  attributes: # переносить коды стран в карту
      «ISO_A3»: «iso»
      «NAME»: «name»
  filter: [«ISO_A3», «in not», [«DZA», «SYR», «TUN»]] # исключить Алжир, Сирию и Тунис
  styles: # стили для объектов этого слоя
      fill: «#000»
      stroke: «#ccc»
      stroke-opacity: 0.5
bounds: # границы, примерно соответствующие Европе
   mode: bbox
   data: [-11,36,38,68] # порядок: долгота левая, правая; широта нижняя, верхняя
export: # размер на выходе и число знаков после запятой
    width: 800
    round: 2

Для выбора проекции Георг предлагает использовать визуальный редактор для «Картографа» и окно экспорта Openstreetmap для границ отреза.

Всё это прекрасно, но увы, преобразование — то, за чем мы вообще пришли — работает не для всех проекций. Либо что-то не доделано, либо какие-то проблемы с зависимостями, но большая часть из них просто выдаёт ошибку «ImportError: cannot import name MultiPolygon» или какую-нибудь другую.

Из работающих можно, например, посмотреть на проекцию Вагнера IV:

SVG-карта в «спутниковой» проекции (но размер от выбора проекции зависит мало) в итоге заняла 190 КБ.

Приступаем к картографингу

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

Отрисовка карты основывается на слоях. Сначала загружается SVG-карта, а затем на неё накладываются слои регионов в цветовом кодировании или символов одного из типов: круги, текстовые метки или иконки (из графических файлов). При создании слоя ему передается массив необходимых данных и функции, генерирующие местоположение и связанные с объектом данные.

На моей карте создано два слоя: оранжевые круги аэропортов и текстовые метки с их названиями (а именно: городами, если крупный аэропорт один, или городами с аэропортами в скобках, если их несколько). Линии перелётов я рисую в отдельным проходе по базе маршрутов функцией addGeoPath.

Про возможность штатной передачи идентификатора через параметр я не знал и приспособил для этого атрибут title, куда записывался код аэропорта по классификации IATA (LED, SVO, HEL...). Но заботливый «Картограф» при генерации страницы оборачивает элемент «circle» в «a», чтобы показывать всплывающую подсказку. Поэтому после окончания формирования карты этот элемент приходится снова убирать.

Для этих манипуляций я после создания карты откладываю «Картографа» в сторону, прохожу циклом по всем созданным графическим объектам (с которыми можно работать методами «Рафаэля»), убираю ненужные мне вещи и «навешиваю» нужные:

переношу содержимое «a» на уровень выше, а сам элемент убирается;
расставляю необходимые CSS-классы объектам;
добавляю обработчики событий (которые в основном меняют нужным объектам CSS-классы);
рисую к каждой текстовой метке подложку, чтобы их можно было прочитать, и размещаю их под текстом.

Гистограмма

Гистограмма рисуется примитивами «Рафаэля» прямо на карте. Здесь создаются линии сетки и прямоугольники, которым придаются обработчики событий (аналогичные предыдущему пункту, только с дополнительным фильтром по авиакомпании).

Совместимость

Из тех браузеров, в которых проверял — не работает:

Эксплорер 7 и 8 (на сайте «Картографа» написано, что он «Gracefully degrades to IE7», но ни моя карта, ни любой из демо-примеров с сайта ни в 7-м, ни в 8-м Эксплорере не работают);
Файерфокс 3.6 (Вин): выкидывает ошибку на этапе отрисовки загруженной карты. В 4.0 (Вин) уже работает.

Работает:

Хром 21 (Мак, Вин);
Файерфокс 15 (Мак, Вин);
Опера 12 (Мак, Вин);
Эксплорер 9: проверял с помощью сервиса Browserling.
Сафари 6 (Мак);
Сафари (айОС 5.1.1): работоспособно, но нельзя сказать, что уж слишком комфортно.

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

Было бы правильно, но я этого не сделал

Написать алгоритм, который «разводит» текстовые метки так, чтобы не было перекрытий.

Как авиакомпании собирают пассажиров с транзитных рейсов?

Wed, 04 Jul 2012 19:39:21 +0400

Современные авиакомпании (не лоукосты) практически всегда перевозят пассажиров из одного города своей маршрутной сети в другой через «домашний» аэропорт (узловой аэропорт, хаб). Из Петербурга в Нью-Йорк прямым рейсом не добраться, а с пересадкой в своём хабе вас готов отвезти десяток авиалиний: «Аэрофлот» и «Трансаэро» через Москву, «Люфтганза» через Франкфурт, Мюнхен или Дюссельдорф, «КЛМ» через Амстердам или даже «Эмирейтс» через Дубай.

При такой схеме в узловой аэропорт отовсюду собираются пассажиры, которые потом опять разлетаются в разных направлениях.

На карте Европы это будет выглядеть так (картинка Great Circle Mapper):

Где россияне получают визы: статистика 2003—2011

Fri, 01 Jun 2012 14:27:18 +0400

Цифры собраны для визовых стран Европы и Северной Америки. В картинку не попали страны с упрощённым в той или иной степени визовым режимом (например, Турция — 30 дней без визы, Кипр — виза по прибытии или Хорватия — без визы летом по турваучеру или шенгенской визе).

Графики нарисованы в Процессинге, легенда добавлена в Файерворксе. Флажки стран — Никиты Иванова.

Ссылки на источники:
Шенгенские отчёты Совета Европы за 2003—2009.
Статистика по Шенгену за 2010 и 2011 (ссылки в правой колонке).
Подсчёты от Хоум Офис.
Монография независимых исследователей по данным Службы натурализации и иммиграции Ирландии.
Данные Бюро по консульским вопросам госдепа США.
Официальная экселевская табличка Министерства гражданства и иммиграции Канады (перед скачиванием нужно заключить лицензионное соглашение с Её Величеством).

Самые большие иллюминаторы

Thu, 17 May 2012 19:31:35 +0400

«Боинг», показывая новый «Дримлайнер», отдельное внимание уделял иллюминаторам, которые помимо электронного постепенного затемнения ещё и превосходят по размеру своих «одноклассников». Вот наглядное сравнение с конкурентами из «Эрбаса»:

А на другом выставочном экземпляре 787-го тот же приём сравнил их с самолётами самого «Боинга». Мне это так понравилось, что я добавил на фото ещё несколько размеров:

«Викерс Виконт» мог себе позволить такие большие окна потому, что не поднимался выше 7 км, а потолок высоты в 18 км накладывал жёсткие ограничения на «Конкорд».