четверг, 2 ноября 2017 г.

Визуализируем карту мира с highcharts

Просматривая на просторах интернета список стран, в которые нужна или не нужна виза я повсюду натыкался на информацию в виде списка стран, пример: https://www.passportindex.org/comparebyPassport.php?p1=ru&fl=&s=yes. Мне казалось что просматривать такое удобно в виде карты.
Так как на сайте passportindex информация обновляется довольно оперативно, то я решил стягивать оттуда актуальную информацию по визам и странам и визуализировать это в виде карты мира.

У passportindex нет своего API, поэтому информацию я решил парсить напрямую, однако возникла проблема с тем, что информация там генерируется с помощью javascript, поэтому обычным curl'ом не стянешь страничку. Поэтому я использую для этого phantomjs.

phantomjs скачивает страничку с данными, она парсится, отбрасывается все ненужное и генерируется csv файл в формате страна, "визовая политика":
AF, "visa required"
AL, "visa-free"
DZ, "visa required"

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

Далее дело за highcharts, который имеет отличное API, он занимается преобразованием текстового вида в вид карты.

В итоге получается вот такая карта: https://visa.amet13.name/

Конечно можно генерировать такую карту не только для России, а для любой другой страны, информация о которой есть в passportindex.

Репозиторий проекта находится тут: https://github.com/Amet13/world-visa-map
Можно такую карту захостить у себя, сделать это просто:
yum -y install epel-release
yum -y install bzip2 fontconfig git npm openssl
npm install phantomjs -g
git clone https://github.com/Amet13/world-visa-map
cd world-visa-map/
./generate.bash

Комментариев нет: