Тепловая карта — картограмма, визуально показывающая интенсивность какого-либо точечного показателя в пределах территории на карте. Интенсивность кодируется цветом и прозрачностью. Наверняка вы не раз видели такие картинки. Так вот, что если вам нужно сделать такую картограмму, а данных на руках у вас нет. Heatmap Painter позволит вам в интерактивном режиме накидать данные на карту и сохранить результат для дальнейшего использования. Штука весьма интересная и может пригодится много кому: разработчикам, аналитикам, дизайнерам. О том как это работает и как использовать читайте далее.
Пользователь
Графики послания президента РФ 2018
2 мин
39KСразу скажу, пост не о политике и послании, а о том как НЕ нужно делать графики, вообще ни для кого не нужно так делать, тем более для президента, особенно когда аудитория столь обширная.
+89
Кольцевые столбчатые диаграммы в ассортименте
6 мин
6.9KТуториал
Эволюционный подход в решении задач как нельзя кстати подходит для визуализации данных. Дивжение от простого к сложному, от одномерных данных к многомерным итерация за итерацией. В этой статье рассмотрим различные варианты круговых диаграмм, от самой простой одномерной до нестандартной самодельной многомерной. В качестве инструмента будем использовать D3.js. Всех заинтересованных прошу под кат.
+20
Тематическая картография: одномерные карты
17 мин
13KТуториал

Всем привет!
Это перевод второй части руководства по тематической картографии от ребят из axismaps.
Первая часть: Тематическая картография: общие вопросы.
Рекомендую к прочтению информационным дизайнерам, журналистам (данных), аналитикам, начинающим картографам, а также всем, кто хочет научиться читать тематические карты и отличать хорошую карту от плохой, вводящей читателя в заблуждение. Всех заинтересовавшихся приглашаю под кат.
+13
Тематическая картография: общие вопросы
26 мин
29KТуториал

Хочу поделиться с вами переводом руководства по тематической картографии от ребят из axismaps.
Рекомендую к прочтению информационным дизайнерам, журналистам (данных), аналитикам, начинающим картографам, а также всем, кто хочет научиться читать тематические карты и отличать хорошую карту от плохой, вводящей читателя в заблуждение. Всех заинтересовавшихся приглашаю под кат.
+21
Дизайн карты: как и почему
6 мин
30KТуториал
В сети можно найти достаточно материалов по созданию стилей карт (и на хабре в том числе), но в основном они показывают техническую сторону создания стиля в tilemill/mapbox studio. А вот с теорией дела обстоят гораздо хуже, в основном пишут о каких-нибудь отдельных аспектах дизайна, и то не всегда объясняют почему нужно делать так, а не иначе. В этой статье я постараюсь исправить эту ситуацию и поделиться опытом с начинающими картостроителями.

Всех интересующихся прошу под кат.

Всех интересующихся прошу под кат.
+28
Улицы и Герои
3 мин
2K
Всем привет. Хочу поделиться с вами своим небольшим проектом, идея которого пришла мне в голову на кануне празднования 9 мая. Тогда я уже никак не успевал реализовать задуманное, так что было решено постараться успеть сделать всё к 22 июня. И вот буквально сегодня ночью доделал. Идея была в том чтобы показать на карте Москвы улицы, названные в честь героев Великой Отечественной Войны.
Все мы ходим и ездим по улицам, названия которых имеют своё историческое обоснование, но мало кто из нас об этом задумывается. Вот и я в процессе сбора данных заново открыл для себя много улиц, о которые даже и не догадывался, что они названы в честь героев. Предлагаю и вам посмотреть знакомые места, узнать новое для себя, и отдать дань памяти людям, пожертвовавшим столь многим ради нас с вами: Улицы и Герои.
-6
Веб-картография и SVG-эффекты
4 мин
18KПоследнее время SVG всё чаще используется в front-end, тут и там известные разработчики пишут хорошие статьи в своих блогах. В общем, SVG, кажется, наконец-то начинает занимать заслуженные позиции в стеке технологий современного веб-разработчика. Так что сегодня предлагаю поговорить о том, как можно использовать SVG в веб-картографии. Мы рассмотрим, как можно использовать возможности SVG и перекочевавшие из него в CSS свойства для достижения различных визуальных эффектов. Использовать будем Leaflet и иногда D3, но ничто не мешает использовать и другие библиотеки. Фильтры, паттерны и другие эффекты ждут вас под катом.


+34
Генератор иконок по геоданным MIG
4 мин
9.1KПриветствую хабросообщество. Хочу поделиться с вами одним из своих последних мини-проектов — генератором иконок по геоданным MIG. С его помощью можно сгенерировать векторные (SVG) и растровые (PNG) иконки, с заданными параметрами (цвет, размер, обводка и прочее).

Всё это работает прямо в браузере и распространяется под лицензией MIT. Под катом можно узнать, как этим пользоваться и как оно работает.

Всё это работает прямо в браузере и распространяется под лицензией MIT. Под катом можно узнать, как этим пользоваться и как оно работает.
+40
Анимация SVG-элемента path
5 мин
123KТуториал
Думаю многие видели обзоры игровых консолей нового поколения от Polygon (Vox Media). Это те, где консоли отрисовывались в стиле blueprint'ов:

Обзоры выглядели круто, довольно необычно и ново. О том как реализована основная фишка обзоров — SVG анимация, как сделать нечто подобное самому, и какие ещё «секретные» возможности скрывает старый добрый SVG в плане анимации элемента

Обзоры выглядели круто, довольно необычно и ново. О том как реализована основная фишка обзоров — SVG анимация, как сделать нечто подобное самому, и какие ещё «секретные» возможности скрывает старый добрый SVG в плане анимации элемента
path
— можно узнать под катом.+60
Рецензия на книгу «Инфографика. Коммуникация и влияние при помощи изображений»
2 мин
12KЗдравствуйте, хаброчитатели. В этот раз хочу поделиться с вами своими впечатлениями от прочтения книги «Инфографика. Коммуникация и влияние при помощи изображений».
Книга совсем недавно переведена издательством «Питер» и представляет из себя взгляд маркетолога на инфографику, как эффективный инструмент маркетинга. О чём вы узнаете, прочитав эту книгу, и кому, на мой взгляд, она будет интересна/полезна — можно узнать в небольшом обзоре под катом.

+1
Анимация перехода от глобуса к двумерной карте
5 мин
18KТуториал
Хочу поделиться с хабром своим картографическим экспериментом, а именно анимацией перехода от Ортографической проекции (глобус) к Равнопромежуточной (одна из проекций обычных двумерных карт). Также этот способ подойдёт и для любых других проекций. Результатом экспериментов стала вот такая анимация:

Как и прежде будем использовать библиотеку d3.js, как и прежде сделаем несколько реализаций: SVG и Canvas. Оба варианта можно будет эффектно использовать для интерактивной инфографики. Ну что, начнём?

Как и прежде будем использовать библиотеку d3.js, как и прежде сделаем несколько реализаций: SVG и Canvas. Оба варианта можно будет эффектно использовать для интерактивной инфографики. Ну что, начнём?
+48
Интернет для людей с нарушенным цветовосприятием и не только. Идея решения проблемы на глобальном уровне
3 мин
26KЗдравствуй, дорогое хабросообщество! Пару дней назад ночью меня посетила одна очень интересная мысль, а именно: как сделать интернет доступнее для слабовидящих и людей, страдающих нарушением цветовосприятия (дальтоников). О том, как можем помочь им Мы (разработчики, дизайнеры, UI/UX специалисты) и создатели браузеров, можно узнать под катом. Так, возможно, выглядит Хабрахабр для некоторых из нас.

А как видишь Хабрахабр ты,

А как видишь Хабрахабр ты,
{userName}
?+29
Метро для всех, или пусть никто не уедет обиженный
2 мин
7KСегодня NextGIS запустил свой новый проект «Метро для всех». Он позволяет москвичам и петербуржцам лучше ориентироваться в метрополитене, его входах/выходах и переходах, и планировать свой маршрут, учитывая такие параметры как наличие эскалатора, рампы и других.

Подробности под катом.

Подробности под катом.
+23
Crossfilter.js, dc.js и D3.js для визуализации Данных
4 мин
35KПриветствую ценителей красивой и функциональной визуализации данных! Предлагаю вашему вниманию небольшой обзор нескольких JavaScript библиотек, которые вкупе с D3.js позволят создать интерактивную визуализацию многомерных данных с возможностью применения фильтрации «на лету».

Заинтересовались, тогда добро пожаловать под кат.

Заинтересовались, тогда добро пожаловать под кат.
+50
Интерактивный глобус — SVG versus Canvas
6 мин
52KТуториал
Доброго времени суток, уважаемый читатель! В прошлый раз мы изучали процесс создания интерактивной карты-хороплета, теперь предлагаю немного усложнить задачу и перейти к трёхмерной модели Земли, именуемой в народе глобусом. Глобус делать будем двух видов: SVG версия и Canvas версия. В обоих случаях будем использовать JavaScript библиотеку d3.js. У каждого варианта свои преимущества. В моём исполнении Голубая планета выглядит следующим образом:

А как создать свой собственный Мир с материками и океанами можно узнать под катом.

А как создать свой собственный Мир с материками и океанами можно узнать под катом.
+54
Интерактивная SVG картограмма с помощью d3.js
7 мин
92KТуториал
Приветствую вас, хаброжители! Сегодня я расскажу вам как сделать интерактивную SVG картограмму при помощи d3js.org, о возможностях этой JavaScript библиотеки в общем, а также придётся немного разобраться в том как и где лучше хранить геоинформацию для веба. В финале мы получим следующее:

Начать сие увлекательное путешествие можно под катом.

Начать сие увлекательное путешествие можно под катом.
+71
Информация
- В рейтинге
- Не участвует
- Зарегистрирован
- Активность