Pull to refresh
85
0
Send message

Heatmap Painter

Reading time 2 min
Views 8.4K

Heatmap Habr Moscow


Тепловая карта — картограмма, визуально показывающая интенсивность какого-либо точечного показателя в пределах территории на карте. Интенсивность кодируется цветом и прозрачностью. Наверняка вы не раз видели такие картинки. Так вот, что если вам нужно сделать такую картограмму, а данных на руках у вас нет. Heatmap Painter позволит вам в интерактивном режиме накидать данные на карту и сохранить результат для дальнейшего использования. Штука весьма интересная и может пригодится много кому: разработчикам, аналитикам, дизайнерам. О том как это работает и как использовать читайте далее.

Читать дальше →
Total votes 9: ↑7 and ↓2 +5
Comments 6

Графики послания президента РФ 2018

Reading time 2 min
Views 38K

Demography by year


Сразу скажу, пост не о политике и послании, а о том как НЕ нужно делать графики, вообще ни для кого не нужно так делать, тем более для президента, особенно когда аудитория столь обширная.

Читать дальше →
Total votes 169: ↑129 and ↓40 +89
Comments 114

Кольцевые столбчатые диаграммы в ассортименте

Reading time 6 min
Views 6.6K

Radial diagramms
Эволюционный подход в решении задач как нельзя кстати подходит для визуализации данных. Дивжение от простого к сложному, от одномерных данных к многомерным итерация за итерацией. В этой статье рассмотрим различные варианты круговых диаграмм, от самой простой одномерной до нестандартной самодельной многомерной. В качестве инструмента будем использовать D3.js. Всех заинтересованных прошу под кат.

Округлить диаграммы
Total votes 22: ↑21 and ↓1 +20
Comments 9

Тематическая картография: одномерные карты

Reading time 17 min
Views 13K


Всем привет!
Это перевод второй части руководства по тематической картографии от ребят из axismaps.
Первая часть: Тематическая картография: общие вопросы.

Рекомендую к прочтению информационным дизайнерам, журналистам (данных), аналитикам, начинающим картографам, а также всем, кто хочет научиться читать тематические карты и отличать хорошую карту от плохой, вводящей читателя в заблуждение. Всех заинтересовавшихся приглашаю под кат.
Читать дальше →
Total votes 13: ↑13 and ↓0 +13
Comments 6

Тематическая картография: общие вопросы

Reading time 26 min
Views 28K


Хочу поделиться с вами переводом руководства по тематической картографии от ребят из axismaps.

Рекомендую к прочтению информационным дизайнерам, журналистам (данных), аналитикам, начинающим картографам, а также всем, кто хочет научиться читать тематические карты и отличать хорошую карту от плохой, вводящей читателя в заблуждение. Всех заинтересовавшихся приглашаю под кат.
Читать дальше →
Total votes 21: ↑21 and ↓0 +21
Comments 6

Дизайн карты: как и почему

Reading time 6 min
Views 30K
В сети можно найти достаточно материалов по созданию стилей карт (и на хабре в том числе), но в основном они показывают техническую сторону создания стиля в tilemill/mapbox studio. А вот с теорией дела обстоят гораздо хуже, в основном пишут о каких-нибудь отдельных аспектах дизайна, и то не всегда объясняют почему нужно делать так, а не иначе. В этой статье я постараюсь исправить эту ситуацию и поделиться опытом с начинающими картостроителями.


Всех интересующихся прошу под кат.
Изучить основы картостроения
Total votes 30: ↑29 and ↓1 +28
Comments 37

Улицы и Герои

Reading time 3 min
Views 2K
Улицы и Герои

Всем привет. Хочу поделиться с вами своим небольшим проектом, идея которого пришла мне в голову на кануне празднования 9 мая. Тогда я уже никак не успевал реализовать задуманное, так что было решено постараться успеть сделать всё к 22 июня. И вот буквально сегодня ночью доделал. Идея была в том чтобы показать на карте Москвы улицы, названные в честь героев Великой Отечественной Войны.

Все мы ходим и ездим по улицам, названия которых имеют своё историческое обоснование, но мало кто из нас об этом задумывается. Вот и я в процессе сбора данных заново открыл для себя много улиц, о которые даже и не догадывался, что они названы в честь героев. Предлагаю и вам посмотреть знакомые места, узнать новое для себя, и отдать дань памяти людям, пожертвовавшим столь многим ради нас с вами: Улицы и Герои.
Технические подробности
Total votes 22: ↑8 and ↓14 -6
Comments 8

Веб-картография и SVG-эффекты

Reading time 4 min
Views 18K
Последнее время SVG всё чаще используется в front-end, тут и там известные разработчики пишут хорошие статьи в своих блогах. В общем, SVG, кажется, наконец-то начинает занимать заслуженные позиции в стеке технологий современного веб-разработчика. Так что сегодня предлагаю поговорить о том, как можно использовать SVG в веб-картографии. Мы рассмотрим, как можно использовать возможности SVG и перекочевавшие из него в CSS свойства для достижения различных визуальных эффектов. Использовать будем Leaflet и иногда D3, но ничто не мешает использовать и другие библиотеки. Фильтры, паттерны и другие эффекты ждут вас под катом.

Solar terminator
Читать дальше →
Total votes 42: ↑38 and ↓4 +34
Comments 8

Генератор иконок по геоданным MIG

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

MIG demopage

Всё это работает прямо в браузере и распространяется под лицензией MIT. Под катом можно узнать, как этим пользоваться и как оно работает.
Читать дальше →
Total votes 40: ↑40 and ↓0 +40
Comments 10

Анимация SVG-элемента path

Reading time 5 min
Views 122K
Думаю многие видели обзоры игровых консолей нового поколения от Polygon (Vox Media). Это те, где консоли отрисовывались в стиле blueprint'ов:

PlayStation 4

Обзоры выглядели круто, довольно необычно и ново. О том как реализована основная фишка обзоров — SVG анимация, как сделать нечто подобное самому, и какие ещё «секретные» возможности скрывает старый добрый SVG в плане анимации элемента path — можно узнать под катом.
Читать дальше →
Total votes 64: ↑62 and ↓2 +60
Comments 15

Рецензия на книгу «Инфографика. Коммуникация и влияние при помощи изображений»

Reading time 2 min
Views 12K
Здравствуйте, хаброчитатели. В этот раз хочу поделиться с вами своими впечатлениями от прочтения книги «Инфографика. Коммуникация и влияние при помощи изображений». imageКнига совсем недавно переведена издательством «Питер» и представляет из себя взгляд маркетолога на инфографику, как эффективный инструмент маркетинга. О чём вы узнаете, прочитав эту книгу, и кому, на мой взгляд, она будет интересна/полезна — можно узнать в небольшом обзоре под катом.
Читать дальше →
Total votes 9: ↑5 and ↓4 +1
Comments 1

Анимация перехода от глобуса к двумерной карте

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

От глобуса к карте


Как и прежде будем использовать библиотеку d3.js, как и прежде сделаем несколько реализаций: SVG и Canvas. Оба варианта можно будет эффектно использовать для интерактивной инфографики. Ну что, начнём?
Приступить к эксперименту
Total votes 50: ↑49 and ↓1 +48
Comments 17

Интернет для людей с нарушенным цветовосприятием и не только. Идея решения проблемы на глобальном уровне

Reading time 3 min
Views 26K
Здравствуй, дорогое хабросообщество! Пару дней назад ночью меня посетила одна очень интересная мысль, а именно: как сделать интернет доступнее для слабовидящих и людей, страдающих нарушением цветовосприятия (дальтоников). О том, как можем помочь им Мы (разработчики, дизайнеры, UI/UX специалисты) и создатели браузеров, можно узнать под катом. Так, возможно, выглядит Хабрахабр для некоторых из нас.

Хабрологотип

А как видишь Хабрахабр ты, {userName}?
Сделать интернет чуточку лучше
Total votes 41: ↑35 and ↓6 +29
Comments 89

Метро для всех, или пусть никто не уедет обиженный

Reading time 2 min
Views 6.9K
Сегодня NextGIS запустил свой новый проект «Метро для всех». Он позволяет москвичам и петербуржцам лучше ориентироваться в метрополитене, его входах/выходах и переходах, и планировать свой маршрут, учитывая такие параметры как наличие эскалатора, рампы и других.



Подробности под катом.
Читать дальше →
Total votes 41: ↑32 and ↓9 +23
Comments 15

Crossfilter.js, dc.js и D3.js для визуализации Данных

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


Заинтересовались, тогда добро пожаловать под кат.
Читать дальше →
Total votes 54: ↑52 and ↓2 +50
Comments 15

Интерактивный глобус — SVG versus Canvas

Reading time 6 min
Views 51K
Доброго времени суток, уважаемый читатель! В прошлый раз мы изучали процесс создания интерактивной карты-хороплета, теперь предлагаю немного усложнить задачу и перейти к трёхмерной модели Земли, именуемой в народе глобусом. Глобус делать будем двух видов: SVG версия и Canvas версия. В обоих случаях будем использовать JavaScript библиотеку d3.js. У каждого варианта свои преимущества. В моём исполнении Голубая планета выглядит следующим образом:

Планета Земля

А как создать свой собственный Мир с материками и океанами можно узнать под катом.
Читать дальше →
Total votes 56: ↑55 and ↓1 +54
Comments 20

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

Reading time 7 min
Views 90K
Приветствую вас, хаброжители! Сегодня я расскажу вам как сделать интерактивную SVG картограмму при помощи d3js.org, о возможностях этой JavaScript библиотеки в общем, а также придётся немного разобраться в том как и где лучше хранить геоинформацию для веба. В финале мы получим следующее:

Картограмма
Начать сие увлекательное путешествие можно под катом.
Читать дальше →
Total votes 75: ↑73 and ↓2 +71
Comments 40

Information

Rating
Does not participate
Registered
Activity