Как стать автором
Обновить
85
0

Пользователь

Отправить сообщение

Heatmap Painter

Время на прочтение2 мин
Количество просмотров8.4K

Heatmap Habr Moscow


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

Читать дальше →
Всего голосов 9: ↑7 и ↓2+5
Комментарии6

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

Время на прочтение2 мин
Количество просмотров38K

Demography by year


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

Читать дальше →
Всего голосов 169: ↑129 и ↓40+89
Комментарии114

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

Время на прочтение6 мин
Количество просмотров6.6K

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

Округлить диаграммы
Всего голосов 22: ↑21 и ↓1+20
Комментарии9

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

Время на прочтение17 мин
Количество просмотров13K


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

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

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

Время на прочтение26 мин
Количество просмотров28K


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

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

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

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


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

Улицы и Герои

Время на прочтение3 мин
Количество просмотров2K
Улицы и Герои

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

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

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

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

Solar terminator
Читать дальше →
Всего голосов 42: ↑38 и ↓4+34
Комментарии8

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

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

MIG demopage

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

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

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

PlayStation 4

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

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

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

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

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

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


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

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

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

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

А как видишь Хабрахабр ты, {userName}?
Сделать интернет чуточку лучше
Всего голосов 41: ↑35 и ↓6+29
Комментарии89

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

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



Подробности под катом.
Читать дальше →
Всего голосов 41: ↑32 и ↓9+23
Комментарии15

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

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


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

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

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

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

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

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

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

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

Информация

В рейтинге
Не участвует
Зарегистрирован
Активность