Визуализируй это!

Недавно в одной рассылке мне попалась статья How do we actually "pull stories out of data”? Мы часто говорим, что анализ раскрывает данные, находит в них паттерны и позволяет превратить их в истории. Но как именно это происходит? Человек — не робот и не может легко и быстро увидеть скрытые зависимости и последовательности в любом числовом ряде. Погружение в данные — это сложный процесс, соединяющий опыт и интуицию. А доменные и научные знания подсказывают, в какую сторону смотреть и какие вопросы задавать. Журналистика данных смотрит на данные с точки зрения раскрытия истории: «смотрите, мы нашли такие зависимости и вот какие выводы мы можем из них сделать». С научной же точки зрения это будет не совсем корректный подход, потому что любые данные могут рассказать много разных историй одновременно. Аналитики не могут интерпретировать данные кроме как в контексте «мы нашли вот такие зависимости в этом наборе данных». При этом никогда нет стопроцентной уверенности, что гипотеза и интерпретация верны. Можно что-то предположить и проверить на 9999 значениях, но не факт, что следующее десятитысячное значение даст такой же результат и не опровергнет начальное предположение. Автор статьи приводит пример, как именно он работает с данными, чтобы попробовать сформулировать алгоритм. Задача такая: в интернет магазине некоторые товары стали продаваться активнее и надо понять: почему это произошло и временное ли это явление. 1. Первым пунктом стоит проверить, а точно ли продажи увеличились, насколько и как именно. Это даст необходимое доменное знание и общее понимание проблемы, которые скорее всего помогут с ответом на «почему». 2. Дальше можно начать думать о причинах. Но не получится сразу погрузиться в данные и начать искать зависимости. Сначала стоит понять, кто пользователи и как именно они покупают товары. Например, связано ли увеличение продаж с увеличением покупателей или каждый из них купил по несколько единиц товара? Ответы на подобные вопросы вызывают ещё больше вопросов: а откуда пришли пользователи, сколько обычно они покупают, были ли рекламные компании и тд. Здесь главная опасность — упасть в кроличью нору и закопаться в этих дополнительных загадках. Нужно понять какие из них имеют смысл, потому что многие скорее всего не дадут никакой новой и интересной информации. Помогут доменные знания и опыт. Поэтому если их нет (впрочем и если есть — тоже), очень полезно показывать промежуточные результаты и советоваться с экспертами, которые этими знаниями уже обладают. 3. В какой-то момент приходит понимание, что предварительные исследования пора сворачивать, потому что идеи для них заканчиваются и начинает вырисовываться какая-то картинка. Итогом всего исследования становится общее непротиворечивое описание ситуации, которое отвечает всем критериям изначального вопроса и учитывает всё найденное до этого. Это развёрнутый ответ на вопрос «что именно произошло?». Стоит, правда, помнить, что это лишь гипотезы и они могут оказаться ложными, если данные были некорректные или нельзя было учесть какой-то неизвестный фактор. А на часть вопросов может не быть ответов вообще. Ссылка на статью: https://counting.substack.com/p/how-do-we-actually-pull-stories-out

​​Любопытная визуализация как выглядела Земля много миллионов лет назад: https://dinosaurpictures.org/ancient-earth/#750 Можно покрутить и понаблюдать, как двигались и менялись континенты. Как и все подобные штуки сделана на three.js.

​​Как сделать Sankey на D3.js Всем привет! Я давно не писала, но за время моего отсутствия у меня накопилось много материала, которым хотелось бы опять начать делиться. И среди прочего я хочу вернуть свою старую идею писать туториалы по разным графикам на D3. В этот раз встречайте sankey! https://teletype.in/@gnykka/d3-sankey В следующий раз будет либо treemap, либо force, пока не решила. #d3 #статья

Собрала тут маленькую подборку интересного из того, что встречала в разных рассылках в январе. 📊 22 лучшие визуализации 2022 года от Visualcapitalist. 📊 Тренды в научных визуализациях в 2022 году. Там любопытно: цветовые схемы, таблицы-графики, спарклайны, разрывные оси, … 📝 История создания визуализации снежного покрова в США. Концепция, скетчи и много кода на R. 🗺 Проект с минималистическими визуализациями геоданных. Автор показывает мосты, перекрёстки, станции метро и прочее одновременно информативно и максимально абстрактно. 🎱 В копилочку моего любимого — туториалы по моделированию физических явлений. Среди прочего: движение ткани, течение жидкости, столкновение шаров. Код написан на JavaScript.

​​Обзор цветовых форматов Не так давно в одной из рассылок, которые я читаю, мне попалась большая статья-обзор на разные цветовые форматы в CSS. Кроме привычных RGB, HEX и HSL там описываются и новые, например, Display P3 и LCH. RGB (red, green, blue) — самый привычный и наименее абстрактный формат. Экраны устройств состоят из миллионов светодиодов красного, зелёного и синего цвета и, задавая цвет в формате RGB, можно управлять этими диодами напрямую. Принцип основан на физике: смешивая три канала в правильном соотношении, мы можем получить любой новый цвет. HEX — это тот же RGB, но значения каждого канала представлены не в десятеричной, а в шестнадцатиричной системе счисления. HSL (hue, saturation, lightness) — это уже более высокий уровень абстракции. Цвет в этом формате состоит из каналов оттенка, насыщенности и светлоты и поэтому он ближе к тому, как человек думает о цвете. Например, какой у цвета оттенок или насколько цвет яркий или тусклый. Из новых форматов есть Display P3. Это всё тот же RGB, но с более широким диапазоном оттенков. Например, самый яркий красный в P3 пространстве будет ярче, чем в пространстве RGB. К сожалению, с поддержкой пока не очень: CSS функция color, которая реализует эти цвета, существует только в Safari. Но картинки, сохранённые в Photoshop в режиме P3, будут выглядеть заметно ярче в любом браузере. LCH — это самый новый формат. Он ставит в приоритет человеческое восприятие, чтобы два цвета с одинаковой светлотой визуально казались одинаковой яркости. LCH — аббревиатура от Lightness, Chroma, Hue, где Chroma — аналог Saturation в HSL. При этом у значений Chroma здесь нет верхней границы, она зависит от технических возможностей экрана. Тут опять плохо с поддержкой, есть в Safari, думают про Chrome, но до популяризации формата ещё очень далеко. Из отдельно любопытного: в октябре прошлого года Злые Марсиане опубликовали идею своего формата вместе с инструментами, которые позволяют его использовать. Это формат OKLCH, он похож на LCH, но не во всём. В этой статье можно прочитать про него подробнее. Соглашусь с автором обзора, что пока новые форматы не получили большого распространения, лучше всего использовать HSL. HSL цвета интуитивны, их легче подбирать, менять и считывать. Хотя, если подумать, я сама чаще пишу цвета в HEX формате — привычка. Ссылка на статью: https://www.joshwcomeau.com/css/color-formats

Как я нарисовала программу на языке Piet Когда-то давно я абсолютно случайно наткнулась на эзотерические языки программирования. Чаще всего эти языки придумываются ради шутки или экспериментов и по-настоящему на них никто не программирует. Тем не менее для этих языков создают и среды разработки, и интерпретаторы с компиляторами — после появления они начинают жить своей жизнью. Piet — это такой язык. Меня он особенно заинтересовал, потому что вдохновлён картинами Пита Мондриана, а я очень люблю абстрактное искусство. Поэтому несколько лет я держала в голове личную хотелку — написать программу на Piet. И вот это случилось! Я написала небольшую программу, которая находит сумму переданных положительных чисел. И описала это в небольшой статье. Там много объяснений и расшифровки кода, с цветными картинками. Надеюсь, получилось не занудно. https://teletype.in/@gnykka/piet Подумываю и другие эзотерические языки в будущем попробовать. Например, сонеты в духе Шекспира начать писать…

На связи Data Heroes и сегодня в нашей школе чародейства и волшебства… Стоп. Мы же не Хогвартс🧙🏻 Однако, сегодняшняя тема подкаста – практически магия, ведь она превращает понятные лишь аналитику таблицы и метрики в очевидные и красочные результаты. Мы поговорим о визуализации данных. ✨ Наши эксперты – топовые профессионалы и настоящие звезды датавиза. Сегодня они расскажут о своем пути в профессии и ответят на самые важные вопросы: - Почему график стоит тысячи слов? - Как убеждать одним графиком и нужно ли вообще это делать? - Правда ли, что датавиз управляет общественным мнением? - С чего начать новичку в специальности? - Технические навыки или творчество - чего больше в визуализации? Скорее включайте подкаст и погружайтесь в датавиз вместе с нами! 🚀 Спойлер: Это только первая часть выпуска о визуализации — через неделю будет продолжение! БОНУС: в эпизоде будет много отличных рекомендаций, полезных материалов по визуализации данных! 📗 ⭐ ALL STARS CAST: Роман Бунин, Татьяна Мисютина, Наталия Степанова, Александр Богачев ⭐ Слушайте подкаст на платформах: Spotify, Anchor, Apple Podacsts, Google, Yandex, Mave, Castbox, Overcast, Telegram (↓) #подкаст #DataHeroes

На прошлой неделе я засветилась на канале Left Join в новом эпизоде подкаста “Data Heroes”. Вместе с коллегами рассуждаю там про визуализации данных, их будущее и роль программирования в их создании. Все ссылки — в репосте ниже.

За последнее время у меня собралось достаточно много ссылок на интересные инструменты и статьи про визуализации. Буду постепенно их разбирать и заодно ими тут делиться. 1. Charts.css — фреймворк для рисования графиков с помощью css. Поддерживает только простые графики типа линий, столбиков и областей. Зато ни строчки кода! 2. Color & Contrast — большой интерактивный гайд про теорию и восприятие цвета. Объясняет научные детали и какое отношение это всё имеет к дизайну интерфейсов. 3. Библиотека для рисования календарика как в профиле github. Если вы очень хотите что-то считать каждый день. И в конце эксперименты с ML: как бы могли выглядеть визуализации, если бы их создавали известные художники.

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

Bangbangeducation до 25-ого сентября открыли бесплатный доступ к своей библиотеке курсов по дизайну, рисованию и искусству. https://bangbangeducation.ru/subscription Когда-то давно (тоже бесплатно, кстати) я слушала у них курс про использование сеток в дизайне и, хотя дизайном я занимаюсь мало и редко, как программистке мне этот курс показался полезным. Сейчас смотрю на нелинейную историю дизайна — это большой сборник ресурсов (видео, книг, эссе) по истории дизайна и различных его направлений.

​​Если вы рассчитывали только на серьёзный и умный контент, то вы пришли не в тот канал. Сегодня я потратила утро на генератор ковра! Просто потому что могу. https://codepen.io/gnykka/pen/BarzYNo Стало интересно (никак не связанный с ковром вопрос): расскажите, участвуете ли вы в каких-то челенджах? Больше мне любопытно про профессиональные (например, кодинг, визуализации, генеративка, ...), но и про другие расскажите, если такие есть! Мой самый долгий челендж был Advent of Code в прошлом декабре, но на все задания меня тогда не хватило — пропустила 2 из 25. Я обычно нахожу челенджи, уже когда они заканчиваются, хотя вот на днях наткнулась на месячные челенджи от Storytelling with Data, думаю попробовать.

✨🌌 Сегодня у меня большой анонс. В течение последних двух лет мы с командой работали над GPU-алгоритмом укладки графа и инструментом визуализации на его основе. Представляю вам Cosmograph — самый быстрый Force Layout для графов в вэбе! С его помощью можно визуализировать графы с сотнями тысячами узлов и ребер (что в разы больше, чем при использовании классических силовых алгоритмов). Cosmograph доступен для всех желающих по адресу cosmograph.app. Можете загружать туда CSV со списком ребер и наслаждаться визуализацией графа в реальном времени. Все работает прямо в браузере! Если у вас есть друзья и коллеги, занимающиеся визуализацией графов, пожалуйста, поделитесь с ними! #tools #networks #cosmograph @dataviznews

Давно ничего не писала, но, кажется, пришло время возвращаться. Ближайшие месяцы я планирую тут разные активности, а пока хочу поделиться несколькими библиотеками, которые нашла за время своего отсутствия. 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 — небольшая библиотека для работы с таймзонами

Совершенно не успеваю ничего дельного здесь писать последние пару месяцев, но зато собрала несколько интересных ссылок. Консольная библиотека на питоне, которая генерирует красивую svg таймлинию из json файла: https://github.com/jasonreisman/Timeline Ещё одна питоновская библиотека, позволяющая рисовать графики прямо в консоли: https://github.com/nschloe/termplotlib Большой репозиторий с реализациями различных алгоритмов и структур данных на JS: https://github.com/trekhleb/javascript-algorithms

Как сделать pie chart Я решила продолжить свою серию туториалов по D3 Сегодня рассуждаю про пайчарты. Не могу назвать себя их фанаткой, хотя иногда и встречаю очень красивые визуализации. https://teletype.in/@gnykka/pies Отдельно ссылка на пример: https://codepen.io/gnykka/pen/porMaXo

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

​​Визуализация всех спутников, летающих в реальном времени вокруг Земли: https://platform.leolabs.space/visualizations/leo Вот это поназапускали, конечно! У меня вопрос возник: когда шаттлы и ракеты запускают, они никакие спутники не сбивают случайно? Аккуратно, штука сделана на three.js и webGL и ощутимо тормозит. А вот ссылка на данные, кстати.

​​Вчера со мной поделились интересной ссылкой: https://code-explained.com/ Это новый проект, сделанный в рамках Школы Бюро Горбунова, с интерактивными визуализациями алгоритмов и структур данных. Пока что там есть подробные объяснялки хеш-таблиц с теорией и пошаговым разбором кода. Скоро должны появиться сортировки и другие алгоритмы. Очень люблю такие проекты! Было бы круто, если бы их было больше и они бы активно развивались. 💬 Авторы просят дать им какую-то обратную связь и критику (можно в комментариях).

🎙Новый выпуск подкаста В конце прошлой недели вышел уже четвёртый выпуск нашего подкаста «Не сегодня» про девушек из IT индустрии. Наша гостья — Василиса, она выросла в Беларуси, а сейчас живёт в Сингапуре, занимается наукой и делает свой стартап Soda. Мне очень нравится этот выпуск, он получился очень живым и весёлым! Мы много болтаем про Сингапур, Азию и разницу менталитетов, про ментальное здоровье и важность упоротости для достижения своих целей и желаний. Таймкоды и ссылки можно найти здесь: https://gnykka.io/not-today Слушайте и подписывайтесь! Яндекс, Apple, Google, Anchor и другие платформы.