Визуализируй это!
2.91K subscribers
15 photos
2 videos
103 links
Привет, я Наташа (@gnykka) и это мой канал про программирование визуализаций данных и не только.
———
🕸️ slaylines.io | gnykka.io
Download Telegram
​​Git для организации работы

Бытует такое мнение, что git — это что-то такое программистское, сложное и обязательно про код. На самом деле я знаю программистов, кто не очень в нём ориентируется и не так уж часто им пользуется. То есть можно сделать вывод, что это не взаимосвязанные умения. Я, кстати, не могу назвать себя прямо экспертом, но два раза в жизни я делала cherry pick!

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

Дополнительное преимущество — быстрый деплой небольших статических сайтов с помощью github pages. Это все сайты, которые имеют адрес вида <user>.github.io. Правда так можно сделать только с открытым кодом. Если проект секретный, или вы хотите показать закрытое демо заказчику, то можно использовать Vercel.

Полезные ссылки:
1. Небольшой cheat sheet с основными командами (ru)
2. Handbook про основы работы (en)
3. Большая и подробная документация (ru)

Я привыкла работать с git через консоль с помощью текстовых команд (у меня даже difftool не настроен), но есть и большое количество приложений, которые позволяют работать через удобрый визуальный интерфейс. Это, например, Github Desktop.

И ещё ссылка, которая будет интересна тем, у кого есть аккаунт на Github. Недавно я наткнулась на небольшое демо, позволяющее построить трёхмерный граф коммитов в виде скайлайна:

https://skyline.github.com/
Мне всегда было интересно моделирование течения воды или газа. Настолько, что я даже диплом писала по гидродинамике. Если пытаться пересказать его тему простым языком, то он был про возникновение турбулентности при потоке газа в тоннеле с колонной. Иногда меня посещает идея переписать его на JS с красивыми динамическими визуализациями, но на это никогда нет времени.

Зато иногда у меня появляется время на небольшие эксперименты. На прошлой неделе я вспоминала как рисовать на D3 ridgeline plot (он же joyplot). Обычно этот график используется для визуализации распределения, но если поиграться с настройками и параметрами, то из такого графика можно получить красивое демо с бегающими волнами:

https://codepen.io/gnykka/pen/yLVpyJb
Про Moscow Dataviz Awards

Не так давно прошла Moscow Dataviz Awards, ежегодная премия в области визуализации данных, инфографики и дата-арта. В лонглист премии вошли 85 работ, и мне стало интересно разобрать их с точки зрения программирования.

В мой личный хит-парад вошли:
1. Карта возраста домов
2. Серия красивых дата-открыток
3. Серия карт доковидного мира
4. Малое семейное древо. Мезенская роспись
5. Пандемия Covid-19

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

Тем не менее я нашла несколько работ, на которые можно обратить внимание в плане кода.

1. Карта ДТП. Мне всегда нравятся аккуратные визуализации на карте. Единственное, что тут не очень — это сильные тормоза, если пытаться показать данные за целый год. 9 тысяч нарисованных точек заставляют карту очень сильно зависать, но на самом деле от этого сложно куда-то деться, эффективно рисовать много всего на карте очень сложно. А вот хитмап, показывающий кластеры на меньшем уровне зума, и выглядит супер, и работает прекрасно.

2. Смертность в России и Пандемия Covid-19. Здесь мне очень понравился дизайн графиков. Судя по исходному коду, сделаны эти проекты похоже: на React и D3. Про D3 — это моё предположение, потому что явно библиотека не загружается, но часть кода сильно её напоминает (например, те же оси).

3. Как причинить максимум добра. Это хороший пример небольшого скроллителинга. Я вообще люблю скроллителинг, поэтому пройти мимо не могла. Сначала хотела отдельно похвалить графики, а потом поняла, что это заготовленные картинки. И это на самом деле очень классный лайфхак! Картинки (если их не очень много, конечно) будут достаточно быстро загружаться и хорошо подстаиваться под любой размер экрана. Не могу точно сказать, как сделан сам скролл, как будто бы никакая сторонняя библиотека для этого не загружается. Но это может ничего не значить, потому что JS кода в проекте очень много и он запутанный.

4. Распространение Covid-19 на карте. Мне не очень понравился этот проект визуально, но плиточная карта мира точно выглядит необычно. Сделана она с помощью Mapbox, кстати.

5. Фальсификации на голосовании по поправкам в Конституцию. Ещё один скроллителинг. Тут уже можно точно сказать, как это сделано: с помощью Scrollama и D3.

Заметила много работ от Яндекса, Риа Новости, Тасс или Тинькофф. Классно, что дата-журналистика в нашей стране продолжает развиваться! Так и до отделов визуализаций как в New York Times когда-нибудь дойдём. Ещё заметила, что в лонглисте премии много статей с классными и красивыми графиками, но, к сожалению, они выложены или как картинки, или как видео. Поэтому покопаться в коде и посмотреть, как именно они сделаны, не получится.

Отдельно хочу написать про Трибьют Тафти в Табло. Я вообще фанатка Тафти и его принципов, поэтому визуально мне эта работа очень понравилась! Но почему оно такое медленное-то?
​​Очень красивые визуалиации рек по всему миру:
https://hi.stamen.com/rivers-de92f8b462ac

Гифка с Волгой, самой длинной рекой в Европе:
Сегодня открылся новый Парк Интуиции

https://intuition.team/park

Это то место, где делались MDWRLD, лонгрид про когнитивные искажения и несколько других моих проектов. Вкратце: это такая песочница, пара десятков человек собираются в одном чатике, объединяются в команды, придумывают интересные проекты и делают их в течение месяца. А в конце хвастаются ими.

Обычно в парке не хватает разработчиков, поэтому многие амбициозные и сложные идеи так и остаются нереализованными. Но зато в парке традиционно много крутых дизайнеров, которые всегда готовы придумать что-то новое. А ещё у нас там всегда поощряется желание попробовать себя в какой-то новой роли. Я сама в этот раз участвовать не буду, но вдруг кому-то из моих читателей захочется. Чтобы попасть, надо заполнить анкету и дождаться ответа.
​​Очень интересная и залипательная визуализация музыкальных жанров:
https://everynoise.com/engenremap.html

Сделана в виде scatter plot, где на координатной плоскости сверху — более электронная музыка, внизу — более акустическая и чистая, слева — более атмосферная и глубокая, а справа — более резкая. Например, техно находится справа сверху, метал — слева по центру, а опера — слева внизу. Можно провалиться вглубь жанра и посмотреть, как расположены его представители. Везде можно послушать примеры звучания.
Observable Plot

Прошёл уже месяц с релиза первой версии библиотеки Observable Plot. Если кто-то пропустил анонс, то это библиотека от создателей D3 и Observable и сделана она на базе D3.

Последние 2 недели я достаточно активно использую эту библиотеку в одном стартапе, где я помогаю делать систему визуализаций. Изначально мы использовали там D3 и сделали свой набор классов, чтобы удобно и быстро строить графики, конфигурировать оси и обновлять данные. А когда увидели Plot, решили попробовать использовать его.

Библиотека пока немного сырая, хотя явных багов нет. Удобнее всего с её помощью делать простые графики типа линейного или столбчатого, когда данные — это обычная табличка. В этом случае можно быстро сделать красивый график, где даже не придётся ничего дополнительно настраивать.

Проблемы начинаются, когда надо сделать нестандартный график, например, тримап или санкей. Они требуют предобработки данных и сначала нужно вручную создавать объекты d3.hierarchy, d3.treemap или d3.sankey. Для тримапа это не большая проблема, потому что потом можно просто добавить прямоугольники и подписи, а вот санкей оказывается не так прост. Например, в Plot можно рисовать линии, соединяющие точки, но их ширина не может быть динамической переменной.

Сделала небольшой пример с несколькими графиками: https://codepen.io/gnykka/pen/ZEeoKwe

Чтобы сделать санкей со связями разной ширины, я рисую каждую линию по-отдельности. В итоге линии получаются прямые и вылезают за пределы блоков. Кажется, что в текущей версии библиотеки по-другому сделать не получится.

А в целом, мне библиотека понравилась! Ещё приятно, что в репозитории много обсуждений и предложений. Возможно, из этого выйдет что-то по-настоящему стоящее.

P.S.: придумала, как сделать санкей! Вместо линий связей можно рисовать области (area plot). Тогда и линии оказываются ровные, и стыки красивые. Но всё равно каждую из линий нужно рисовать отдельно.
🎙Новый выпуск подкаста

В конце прошлой недели вышел уже четвёртый выпуск нашего подкаста «Не сегодня» про девушек из IT индустрии. Наша гостья — Василиса, она выросла в Беларуси, а сейчас живёт в Сингапуре, занимается наукой и делает свой стартап Soda.

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

Таймкоды и ссылки можно найти здесь: https://gnykka.io/not-today

Слушайте и подписывайтесь! Яндекс, Apple, Google, Anchor и другие платформы.
​​Вчера со мной поделились интересной ссылкой:
https://code-explained.com/

Это новый проект, сделанный в рамках Школы Бюро Горбунова, с интерактивными визуализациями алгоритмов и структур данных. Пока что там есть подробные объяснялки хеш-таблиц с теорией и пошаговым разбором кода. Скоро должны появиться сортировки и другие алгоритмы. Очень люблю такие проекты! Было бы круто, если бы их было больше и они бы активно развивались.

💬 Авторы просят дать им какую-то обратную связь и критику (можно в комментариях).
👍1🐳1
​​Визуализация всех спутников, летающих в реальном времени вокруг Земли:
https://platform.leolabs.space/visualizations/leo

Вот это поназапускали, конечно! У меня вопрос возник: когда шаттлы и ракеты запускают, они никакие спутники не сбивают случайно?

Аккуратно, штука сделана на three.js и webGL и ощутимо тормозит. А вот ссылка на данные, кстати.
​​Как размечают зоны для самокатов

Всем привет! Пора заканчивать мой временный перерыв и отдых от канала. Тем более, что набралось несколько новостей, которыми я бы хотела поделиться. И начну я с рассказа про один из проектов, над которым работаю последние месяцы.

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

Обычно эти данные в виде geojson или kml файлов приходят компаниям от самих городов. Там могут быть зоны с ограничением скорости, зоны, куда нельзя заезжать, зоны, где нельзя парковаться или где наоборот можно и нужно. Все эти зоны обрабатываются, загружаются во внутреннюю базу данных и становятся доступны на самих самокатах. То есть в зоне с ограничением скорости в 10км/ч самокат не сможет поехать быстрее, а в зоне, где запрещено движение, просто откажется ехать дальше.

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

Сначала немного про технические детали. Чтобы работать с геоданными, в проекте используется H3 — иерархическая система геопространственной индексации, придуманная Uber. По этой системе поверхность Земли покрывается шестиугольниками (гексагонами) разного разрешения вплоть до одного квадратного метра. Почему гексы? Во-первых, сферу всегда можно ими покрыть полностью и без дырок. Во-вторых, расстояние от одного гекса до всех его соседей всегда одинаковое (что не будет правдой для треугольного или квадратного разбиений). И наконец, для такой системы алгоритмы индексации и поиска будут работать быстрее и эффективнее.

Оригинальная библиотека H3 написана на С, но для веба сделана версия на JS. Обещают ещё Python и Go, но пока не портировали.

Не буду расписывать, что и как умеет h3-js, но приведу ссылку на серию туториалов на Observable:
https://observablehq.com/collection/@nrabinowitz/h3-tutorial

Про сам проект я не могу рассказывать много подробностей. Нам нужно было уметь загружать полигоны для будущих зон, заполнять их гексами на выбранном уровне разрешения, указывать дополнительные параметры (например, название или максимальную скорость) и загружать это всё на сервер. В готовом виде зоны выглядят как на картинке ниже — это тестовые данные, которые я утром нарисовала для Москвы.
1
​​58 способов визуализировать «Алису в стране чудес»

Нашла интересный пост-исследование с описанием 58 разных способов визуализировать книгу «Алиса в стране чудес». 41 из них автор нашёл в сети, оставшиеся 17 придумал сам.

Авторские визуализации можно найти в этом pdf. Там же, на последней страницу — ссылки и источники всех других найденных визуализаций.
Больше деталей описано статье.
Как сделать pie chart

Я решила продолжить свою серию туториалов по D3
Сегодня рассуждаю про пайчарты. Не могу назвать себя их фанаткой, хотя иногда и встречаю очень красивые визуализации.

https://teletype.in/@gnykka/pies

Отдельно ссылка на пример: https://codepen.io/gnykka/pen/porMaXo
1🔥1
Совершенно не успеваю ничего дельного здесь писать последние пару месяцев, но зато собрала несколько интересных ссылок.

Консольная библиотека на питоне, которая генерирует красивую svg таймлинию из json файла:
https://github.com/jasonreisman/Timeline

Ещё одна питоновская библиотека, позволяющая рисовать графики прямо в консоли:
https://github.com/nschloe/termplotlib

Большой репозиторий с реализациями различных алгоритмов и структур данных на JS:
https://github.com/trekhleb/javascript-algorithms
3
Давно ничего не писала, но, кажется, пришло время возвращаться. Ближайшие месяцы я планирую тут разные активности, а пока хочу поделиться несколькими библиотеками, которые нашла за время своего отсутствия.

https://github.com/finos/perspective — библиотека для визуализаций, заточенная под большие и обновляющиеся во времени данные
https://github.com/reaviz/reagraph — библиотека для визуализации графов с помощью React и WebGL
https://github.com/yisibl/resvg-js — шустрая рисовалка SVG без зависимостей и с Rust под капотом

А эти 2 библиотеки не про визуализации, но тоже потенциально полезные:
https://naver.github.io/egjs-infinitegrid — модуль для создания разных сеток элементов (например, masonry)
http://spacetime.how — небольшая библиотека для работы с таймзонами
👍6
Forwarded from 🗞 Виз Ньюз (Nikita Rokotyan)
This media is not supported in your browser
VIEW IN TELEGRAM
🌌 Сегодня у меня большой анонс. В течение последних двух лет мы с командой работали над GPU-алгоритмом укладки графа и инструментом визуализации на его основе.

Представляю вам Cosmograph — самый быстрый Force Layout для графов в вэбе! С его помощью можно визуализировать графы с сотнями тысячами узлов и ребер (что в разы больше, чем при использовании классических силовых алгоритмов).

Cosmograph доступен для всех желающих по адресу cosmograph.app. Можете загружать туда CSV со списком ребер и наслаждаться визуализацией графа в реальном времени. Все работает прямо в браузере!

Если у вас есть друзья и коллеги, занимающиеся визуализацией графов, пожалуйста, поделитесь с ними!

#tools #networks #cosmograph @dataviznews
👍104
​​Если вы рассчитывали только на серьёзный и умный контент, то вы пришли не в тот канал.
Сегодня я потратила утро на генератор ковра! Просто потому что могу.

https://codepen.io/gnykka/full/BarzYNo (можно кликать по экрану для его перерисовывания)

Стало интересно (никак не связанный с ковром вопрос): расскажите, участвуете ли вы в каких-то челенджах? Больше мне любопытно про профессиональные (например, кодинг, визуализации, генеративка, ...), но и про другие расскажите, если такие есть!

Мой самый долгий челендж был Advent of Code в прошлом декабре, но на все задания меня тогда не хватило — пропустила 2 из 25. Я обычно нахожу челенджи, уже когда они заканчиваются, хотя вот на днях наткнулась на месячные челенджи от Storytelling with Data, думаю попробовать.
11👍5🎉2
Bangbangeducation до 25-ого сентября открыли бесплатный доступ к своей библиотеке курсов по дизайну, рисованию и искусству.

https://bangbangeducation.ru/subscription

Когда-то давно (тоже бесплатно, кстати) я слушала у них курс про использование сеток в дизайне и, хотя дизайном я занимаюсь мало и редко, как программистке мне этот курс показался полезным.

Сейчас смотрю на нелинейную историю дизайна — это большой сборник ресурсов (видео, книг, эссе) по истории дизайна и различных его направлений.
🔥10
На днях организаторы опубликовали видео, и наконец я могу поделиться: в начале июня я выступала на конференции HolyJS с почти часовым докладом про создание визуализаций!

Я там рассказывала про разные подходы и приёмы в дизайне визуализаций и показывала, как сделать что-то несложное с помощью D3js и React. За основу брала данные с прошлогодней конференции. Вот, что у меня в итоге получилось — это ссылка на песочницу, там в проекте можно посмотреть и сами оригинальные данные.

По этой ссылке можно посмотреть весь список выступлений, там много интересного.
🔥87