Давно ничего не писала, но, кажется, пришло время возвращаться. Ближайшие месяцы я планирую тут разные активности, а пока хочу поделиться несколькими библиотеками, которые нашла за время своего отсутствия.
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 — небольшая библиотека для работы с таймзонами
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 — небольшая библиотека для работы с таймзонами
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
Представляю вам Cosmograph — самый быстрый Force Layout для графов в вэбе! С его помощью можно визуализировать графы с сотнями тысячами узлов и ребер (что в разы больше, чем при использовании классических силовых алгоритмов).
Cosmograph доступен для всех желающих по адресу cosmograph.app. Можете загружать туда CSV со списком ребер и наслаждаться визуализацией графа в реальном времени. Все работает прямо в браузере!
Если у вас есть друзья и коллеги, занимающиеся визуализацией графов, пожалуйста, поделитесь с ними!
#tools #networks #cosmograph @dataviznews
Если вы рассчитывали только на серьёзный и умный контент, то вы пришли не в тот канал.
Сегодня я потратила утро на генератор ковра! Просто потому что могу.
https://codepen.io/gnykka/full/BarzYNo (можно кликать по экрану для его перерисовывания)
Стало интересно (никак не связанный с ковром вопрос): расскажите, участвуете ли вы в каких-то челенджах? Больше мне любопытно про профессиональные (например, кодинг, визуализации, генеративка, ...), но и про другие расскажите, если такие есть!
Мой самый долгий челендж был Advent of Code в прошлом декабре, но на все задания меня тогда не хватило — пропустила 2 из 25. Я обычно нахожу челенджи, уже когда они заканчиваются, хотя вот на днях наткнулась на месячные челенджи от Storytelling with Data, думаю попробовать.
Сегодня я потратила утро на генератор ковра! Просто потому что могу.
https://codepen.io/gnykka/full/BarzYNo (можно кликать по экрану для его перерисовывания)
Стало интересно (никак не связанный с ковром вопрос): расскажите, участвуете ли вы в каких-то челенджах? Больше мне любопытно про профессиональные (например, кодинг, визуализации, генеративка, ...), но и про другие расскажите, если такие есть!
Мой самый долгий челендж был Advent of Code в прошлом декабре, но на все задания меня тогда не хватило — пропустила 2 из 25. Я обычно нахожу челенджи, уже когда они заканчиваются, хотя вот на днях наткнулась на месячные челенджи от Storytelling with Data, думаю попробовать.
Bangbangeducation до 25-ого сентября открыли бесплатный доступ к своей библиотеке курсов по дизайну, рисованию и искусству.
https://bangbangeducation.ru/subscription
Когда-то давно (тоже бесплатно, кстати) я слушала у них курс про использование сеток в дизайне и, хотя дизайном я занимаюсь мало и редко, как программистке мне этот курс показался полезным.
Сейчас смотрю на нелинейную историю дизайна — это большой сборник ресурсов (видео, книг, эссе) по истории дизайна и различных его направлений.
https://bangbangeducation.ru/subscription
Когда-то давно (тоже бесплатно, кстати) я слушала у них курс про использование сеток в дизайне и, хотя дизайном я занимаюсь мало и редко, как программистке мне этот курс показался полезным.
Сейчас смотрю на нелинейную историю дизайна — это большой сборник ресурсов (видео, книг, эссе) по истории дизайна и различных его направлений.
Bang Bang Education
Дизайн-библиотека — Bang Bang Education
Обновляемая онлайн-коллекция курсов для каждого, кто хочет учиться и готов контролировать этот процесс самостоятельно
На днях организаторы опубликовали видео, и наконец я могу поделиться: в начале июня я выступала на конференции HolyJS с почти часовым докладом про создание визуализаций!
Я там рассказывала про разные подходы и приёмы в дизайне визуализаций и показывала, как сделать что-то несложное с помощью D3js и React. За основу брала данные с прошлогодней конференции. Вот, что у меня в итоге получилось — это ссылка на песочницу, там в проекте можно посмотреть и сами оригинальные данные.
По этой ссылке можно посмотреть весь список выступлений, там много интересного.
Я там рассказывала про разные подходы и приёмы в дизайне визуализаций и показывала, как сделать что-то несложное с помощью D3js и React. За основу брала данные с прошлогодней конференции. Вот, что у меня в итоге получилось — это ссылка на песочницу, там в проекте можно посмотреть и сами оригинальные данные.
По этой ссылке можно посмотреть весь список выступлений, там много интересного.
За последнее время у меня собралось достаточно много ссылок на интересные инструменты и статьи про визуализации. Буду постепенно их разбирать и заодно ими тут делиться.
1. Charts.css — фреймворк для рисования графиков с помощью css. Поддерживает только простые графики типа линий, столбиков и областей. Зато ни строчки кода!
2. Color & Contrast — большой интерактивный гайд про теорию и восприятие цвета. Объясняет научные детали и какое отношение это всё имеет к дизайну интерфейсов.
3. Библиотека для рисования календарика как в профиле github. Если вы очень хотите что-то считать каждый день.
И в конце эксперименты с ML: как бы могли выглядеть визуализации, если бы их создавали известные художники.
1. Charts.css — фреймворк для рисования графиков с помощью css. Поддерживает только простые графики типа линий, столбиков и областей. Зато ни строчки кода!
2. Color & Contrast — большой интерактивный гайд про теорию и восприятие цвета. Объясняет научные детали и какое отношение это всё имеет к дизайну интерфейсов.
3. Библиотека для рисования календарика как в профиле github. Если вы очень хотите что-то считать каждый день.
И в конце эксперименты с ML: как бы могли выглядеть визуализации, если бы их создавали известные художники.
На прошлой неделе я засветилась на канале Left Join в новом эпизоде подкаста “Data Heroes”.
Вместе с коллегами рассуждаю там про визуализации данных, их будущее и роль программирования в их создании. Особенно мне понравился формат: это не диалог, а хорошо смонтированные небольшие монологи гостей подкаста на разные темы.
Эпизод разбит на 2 части:
🔸Часть 1: Роман Бунин, Татьяна Мисютина, Наталия Степанова, Александр Богачев.
🔸Часть 2: Андрей Дорожный, Анастасия Кузнецова, Никита Рокотян.
Отдельно большой список крутых ресурсов и ссылок, которые советуют спикеры.
Вместе с коллегами рассуждаю там про визуализации данных, их будущее и роль программирования в их создании. Особенно мне понравился формат: это не диалог, а хорошо смонтированные небольшие монологи гостей подкаста на разные темы.
Эпизод разбит на 2 части:
🔸Часть 1: Роман Бунин, Татьяна Мисютина, Наталия Степанова, Александр Богачев.
🔸Часть 2: Андрей Дорожный, Анастасия Кузнецова, Никита Рокотян.
Отдельно большой список крутых ресурсов и ссылок, которые советуют спикеры.
Как я нарисовала программу на языке Piet
Когда-то давно я абсолютно случайно наткнулась на эзотерические языки программирования. Чаще всего эти языки придумываются ради шутки или экспериментов и по-настоящему на них никто не программирует. Тем не менее для этих языков создают и среды разработки, и интерпретаторы с компиляторами — после появления они начинают жить своей жизнью.
Piet — это такой язык. Меня он особенно заинтересовал, потому что вдохновлён картинами Пита Мондриана, а я очень люблю абстрактное искусство. Поэтому несколько лет я держала в голове личную хотелку — написать программу на Piet.
И вот это случилось! Я написала небольшую программу, которая находит сумму переданных положительных чисел. И описала это в небольшой статье. Там много объяснений и расшифровки кода, с цветными картинками. Надеюсь, получилось не занудно.
https://teletype.in/@gnykka/piet
Подумываю и другие эзотерические языки в будущем попробовать. Например, сонеты в духе Шекспира начать писать…
Когда-то давно я абсолютно случайно наткнулась на эзотерические языки программирования. Чаще всего эти языки придумываются ради шутки или экспериментов и по-настоящему на них никто не программирует. Тем не менее для этих языков создают и среды разработки, и интерпретаторы с компиляторами — после появления они начинают жить своей жизнью.
Piet — это такой язык. Меня он особенно заинтересовал, потому что вдохновлён картинами Пита Мондриана, а я очень люблю абстрактное искусство. Поэтому несколько лет я держала в голове личную хотелку — написать программу на Piet.
И вот это случилось! Я написала небольшую программу, которая находит сумму переданных положительных чисел. И описала это в небольшой статье. Там много объяснений и расшифровки кода, с цветными картинками. Надеюсь, получилось не занудно.
https://teletype.in/@gnykka/piet
Подумываю и другие эзотерические языки в будущем попробовать. Например, сонеты в духе Шекспира начать писать…
Teletype
Язык Piet: программы, выглядящие как абстрактные картины
Piet — эзотерический язык программирования, придуманный для развлечения. Я нарисовала на нём программу, и рассказываю, как я это сделала.
Обзор цветовых форматов
Не так давно в одной из рассылок, которые я читаю, мне попалась большая статья-обзор на разные цветовые форматы в 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
Не так давно в одной из рассылок, которые я читаю, мне попалась большая статья-обзор на разные цветовые форматы в 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
Собрала тут маленькую подборку интересного из того, что встречала в разных рассылках в январе.
📊 22 лучшие визуализации 2022 года от Visualcapitalist.
📊 Тренды в научных визуализациях в 2022 году. Там любопытно: цветовые схемы, таблицы-графики, спарклайны, разрывные оси, …
📝 История создания визуализации снежного покрова в США. Концепция, скетчи и много кода на R.
🗺 Проект с минималистическими визуализациями геоданных. Автор показывает мосты, перекрёстки, станции метро и прочее одновременно информативно и максимально абстрактно.
🎱 В копилочку моего любимого — туториалы по моделированию физических явлений. Среди прочего: движение ткани, течение жидкости, столкновение шаров. Код написан на JavaScript.
📊 22 лучшие визуализации 2022 года от Visualcapitalist.
📊 Тренды в научных визуализациях в 2022 году. Там любопытно: цветовые схемы, таблицы-графики, спарклайны, разрывные оси, …
📝 История создания визуализации снежного покрова в США. Концепция, скетчи и много кода на R.
🗺 Проект с минималистическими визуализациями геоданных. Автор показывает мосты, перекрёстки, станции метро и прочее одновременно информативно и максимально абстрактно.
🎱 В копилочку моего любимого — туториалы по моделированию физических явлений. Среди прочего: движение ткани, течение жидкости, столкновение шаров. Код написан на JavaScript.
Как сделать Sankey на D3.js
Всем привет! Я давно не писала, но за время моего отсутствия у меня накопилось много материала, которым хотелось бы опять начать делиться. И среди прочего я хочу вернуть свою старую идею писать туториалы по разным графикам на D3.
В этот раз встречайте sankey!
https://teletype.in/@gnykka/d3-sankey
В следующий раз будет либо treemap, либо force, пока не решила.
#d3 #статья
Всем привет! Я давно не писала, но за время моего отсутствия у меня накопилось много материала, которым хотелось бы опять начать делиться. И среди прочего я хочу вернуть свою старую идею писать туториалы по разным графикам на D3.
В этот раз встречайте sankey!
https://teletype.in/@gnykka/d3-sankey
В следующий раз будет либо treemap, либо force, пока не решила.
#d3 #статья
Любопытная визуализация как выглядела Земля много миллионов лет назад:
https://dinosaurpictures.org/ancient-earth/#750
Можно покрутить и понаблюдать, как двигались и менялись континенты.
Как и все подобные штуки сделана на three.js.
https://dinosaurpictures.org/ancient-earth/#750
Можно покрутить и понаблюдать, как двигались и менялись континенты.
Как и все подобные штуки сделана на three.js.
Недавно в одной рассылке мне попалась статья 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
Мы часто говорим, что анализ раскрывает данные, находит в них паттерны и позволяет превратить их в истории. Но как именно это происходит?
Человек — не робот и не может легко и быстро увидеть скрытые зависимости и последовательности в любом числовом ряде. Погружение в данные — это сложный процесс, соединяющий опыт и интуицию. А доменные и научные знания подсказывают, в какую сторону смотреть и какие вопросы задавать.
Журналистика данных смотрит на данные с точки зрения раскрытия истории: «смотрите, мы нашли такие зависимости и вот какие выводы мы можем из них сделать». С научной же точки зрения это будет не совсем корректный подход, потому что любые данные могут рассказать много разных историй одновременно.
Аналитики не могут интерпретировать данные кроме как в контексте «мы нашли вот такие зависимости в этом наборе данных». При этом никогда нет стопроцентной уверенности, что гипотеза и интерпретация верны. Можно что-то предположить и проверить на 9999 значениях, но не факт, что следующее десятитысячное значение даст такой же результат и не опровергнет начальное предположение.
Автор статьи приводит пример, как именно он работает с данными, чтобы попробовать сформулировать алгоритм. Задача такая: в интернет магазине некоторые товары стали продаваться активнее и надо понять: почему это произошло и временное ли это явление.
1. Первым пунктом стоит проверить, а точно ли продажи увеличились, насколько и как именно. Это даст необходимое доменное знание и общее понимание проблемы, которые скорее всего помогут с ответом на «почему».
2. Дальше можно начать думать о причинах. Но не получится сразу погрузиться в данные и начать искать зависимости. Сначала стоит понять, кто пользователи и как именно они покупают товары. Например, связано ли увеличение продаж с увеличением покупателей или каждый из них купил по несколько единиц товара? Ответы на подобные вопросы вызывают ещё больше вопросов: а откуда пришли пользователи, сколько обычно они покупают, были ли рекламные кампании и тд.
Здесь главная опасность — упасть в кроличью нору и закопаться в этих дополнительных загадках. Нужно понять какие из них имеют смысл, потому что многие скорее всего не дадут никакой новой и интересной информации. Помогут доменные знания и опыт. Поэтому если их нет (впрочем и если есть — тоже), очень полезно показывать промежуточные результаты и советоваться с экспертами, которые этими знаниями уже обладают.
3. В какой-то момент приходит понимание, что предварительные исследования пора сворачивать, потому что идеи для них заканчиваются и начинает вырисовываться какая-то картинка. Итогом всего исследования становится общее непротиворечивое описание ситуации, которое отвечает всем критериям изначального вопроса и учитывает всё найденное до этого. Это развёрнутый ответ на вопрос «что именно произошло?».
Стоит, правда, помнить, что это лишь гипотезы и они могут оказаться ложными, если данные были некорректные или нельзя было учесть какой-то неизвестный фактор. А на часть вопросов может не быть ответов вообще.
Ссылка на статью: https://counting.substack.com/p/how-do-we-actually-pull-stories-out
Counting Stuff
How do we actually "pull stories out of data"?
It's hard to describe and very branchy
Собрала в выходные подборку любопытных визуализаций, которые встретились и запомнились мне за последний месяц.
🌪️ Интерактивная карта с крупными ветряными электростанциями Великобритании. Показывает их расположение и сколько энергии производит каждая из них.
⚙️ Скроллителлинг, рассказывающий, как работает квантовый компьютер.
🗺️ Исследование о гендерном неравенстве на примере имён улиц в Порто. В честь женщин названо в 9 раз меньше улиц, чем в честь мужчин, а самые крупные названные посвящены святым.
🍷 Визуализация сколько и какого алкоголя пьют в разных странах за одну неделю.
🌪️ Интерактивная карта с крупными ветряными электростанциями Великобритании. Показывает их расположение и сколько энергии производит каждая из них.
⚙️ Скроллителлинг, рассказывающий, как работает квантовый компьютер.
🗺️ Исследование о гендерном неравенстве на примере имён улиц в Порто. В честь женщин названо в 9 раз меньше улиц, чем в честь мужчин, а самые крупные названные посвящены святым.
🍷 Визуализация сколько и какого алкоголя пьют в разных странах за одну неделю.
Давно хотела поделиться: года три назад для одного личного исследования я сделала демо, где сравнила canvas рисовалки PixiJS, Two.js и Paper.js. Я выложила его на HackerNews, поймала там довольно много внимания и обсуждений, но быстро как-то подзабила.
А вот другие не забили. В результате за это время github репозиторий обзавёлся 463 звёздочками, а кроме меня там что-то делали ещё 19 человек (даже пара авторов этих библиотек вносили правки).
И теперь это маленькое демо превратилось в сравнение аж 18 разных библиотек и способов рисования!
https://benchmarks.slaylines.io
Очень хочу добавить туда ещё и вычисление времени, которое нужно на первый рендеринг. И ещё пару недостающих библиотек, например, Phaser.
P.S.: аккуратно кликайте на ссылки в danger zone ⚠️, на слабых компьютерах это может подвесить браузер.
А вот другие не забили. В результате за это время github репозиторий обзавёлся 463 звёздочками, а кроме меня там что-то делали ещё 19 человек (даже пара авторов этих библиотек вносили правки).
И теперь это маленькое демо превратилось в сравнение аж 18 разных библиотек и способов рисования!
https://benchmarks.slaylines.io
Очень хочу добавить туда ещё и вычисление времени, которое нужно на первый рендеринг. И ещё пару недостающих библиотек, например, Phaser.
P.S.: аккуратно кликайте на ссылки в danger zone ⚠️, на слабых компьютерах это может подвесить браузер.
Мы с коллегами собрали папку каналов про визуализации данных. Внутри много красивых графиков, дата-арт, журналистика и полезная теория. Я уже давно на все подписана и вам советую!
Designing Numbers
Настенька и графики
Data-comics
Виз Ньюз
Reveal the Data
data.csv
Чартомойка
Рациональные числа
Дата-сторителлинг
novichkov.net
Designing Numbers
Настенька и графики
Data-comics
Виз Ньюз
Reveal the Data
data.csv
Чартомойка
Рациональные числа
Дата-сторителлинг
novichkov.net
Всем привет!
Вчера в мой небольшой уютный канал пришло много новых людей, поэтому я решила написать пост приветствие.
Меня зовут Наташа и я разработчица. Я делаю визуализации данных и веб-проекты разной сложности. Начинала в лаборатории МГУ с совместных проектов с Microsoft Research, потом осваивала фронтенд в Лаборатории Данных, а последние лет 6 работаю на себя и развиваю своё бюро разработки slay_lines.
Этот канал — моё хоть и профессиональное, но всё же хобби. Поэтому веду я его не очень регулярно.
Здесь всё так или иначе крутится вокруг программирования. Я выкладываю ссылки на интересные мне визуализации или инструменты, иногда пишу туториалы по D3js, иногда — обзоры на прочитанные статьи или книги. Ещё показываю разные демо, которые могу сделать на досуге.
Welcome! 📊
Вчера в мой небольшой уютный канал пришло много новых людей, поэтому я решила написать пост приветствие.
Меня зовут Наташа и я разработчица. Я делаю визуализации данных и веб-проекты разной сложности. Начинала в лаборатории МГУ с совместных проектов с Microsoft Research, потом осваивала фронтенд в Лаборатории Данных, а последние лет 6 работаю на себя и развиваю своё бюро разработки slay_lines.
Этот канал — моё хоть и профессиональное, но всё же хобби. Поэтому веду я его не очень регулярно.
Здесь всё так или иначе крутится вокруг программирования. Я выкладываю ссылки на интересные мне визуализации или инструменты, иногда пишу туториалы по D3js, иногда — обзоры на прочитанные статьи или книги. Ещё показываю разные демо, которые могу сделать на досуге.
Welcome! 📊
Раз в несколько месяцев я люблю участвовать в челенджах от Codepen. Особенно в тех, где можно что-то порисовать на канвасе. На прошлой неделе я дождалась очередную интересную мне тему: частицы и их физика!
https://codepen.io/gnykka/pen/oNQQqwG
Немного о том, как именно это сделано.
1. Я взяла изображение и, отрисовав его на канвасе, считала информацию о пикселях. Чтобы уменьшить размер и создать эффект частиц я отфильтровала часть, оставив только каждый третий пиксель в строке и столбце.
2. Эффект движения частиц возникает при движении мыши. Идею я взяла из вот этого примера, упростив и подстроив его под себя.
3. При каждом движении мыши для каждой частицы считается квадрат расстояние от неё до положения курсора. Если это значение меньше заданного параметра
4. Для вычисления направления можно использовать функцию
5. Чтобы частицы возвращались в исходное положение, когда на них не оказывает влияние курсор, введён ещё один коэффициент —
https://codepen.io/gnykka/pen/oNQQqwG
Немного о том, как именно это сделано.
1. Я взяла изображение и, отрисовав его на канвасе, считала информацию о пикселях. Чтобы уменьшить размер и создать эффект частиц я отфильтровала часть, оставив только каждый третий пиксель в строке и столбце.
2. Эффект движения частиц возникает при движении мыши. Идею я взяла из вот этого примера, упростив и подстроив его под себя.
3. При каждом движении мыши для каждой частицы считается квадрат расстояние от неё до положения курсора. Если это значение меньше заданного параметра
forceDist, то частица должна будет сдвинуться. Вопрос, куда и насколько?4. Для вычисления направления можно использовать функцию
Math.atan2, которая считает угол между точкой и положительной частью оси Х. А расстояние можно узнать, взяв синус и косинус этого угла и умножив на коэффициент force (он зависит от расстояния между частицей и курсором).5. Чтобы частицы возвращались в исходное положение, когда на них не оказывает влияние курсор, введён ещё один коэффициент —
dragValue. Если он меньше 1, то он постепенно сводит изначально посчитанное расстояние к 0. В итоге частица оказывается на своём старом месте.Наткнулась недавно на небольшую статью с необычными визуализациями.
В 1952 году фотограф Гьен Мили сделал серию фотографий скрипача Яши Хейфеца. Идея была в попытке поймать и показать движения смычка при игре на скрипке. Для этого на смычок в районе руки музыканта был прикреплён источник света, Хейфец играл в темноте, а Мили снимал его с длинной выдержкой.
В 1952 году фотограф Гьен Мили сделал серию фотографий скрипача Яши Хейфеца. Идея была в попытке поймать и показать движения смычка при игре на скрипке. Для этого на смычок в районе руки музыканта был прикреплён источник света, Хейфец играл в темноте, а Мили снимал его с длинной выдержкой.
Возвращаюсь с небольшой подборкой интересного, на что наткнулась за последние месяцы.
1. Карта выработки энергии и оценка её экологичности для всех стран мира.
https://app.electricitymaps.com/map
2. Недавно опубликовали очередной ежегодный отчёт State of CSS. Там про тренды, новые фичи, фреймворки и всё, что сейчас популярно в вёрстке.
https://2023.stateofcss.com
3. Открытая коллекция принципов и методов в дизайне. При чём как графическом, так и например, при проектировании дорог.
https://principles.design
4. Огромный список публичных API, которые можно свободно использовать в личных и не только проектах. От привычных всем финансовых и погодных до спортивных, музыкальных или автомобильных.
https://github.com/public-apis/public-apis
5. Статья, какие есть способы улучшить доступность графиков.
https://blog.pope.tech/2023/08/31/how-to-make-charts-and-graphs-more-accessible
Я уже месяц в большом путешествии по Латинской Америке. И ещё почти месяц впереди. Поэтому регулярные посты как-то не получаются. Зато я уже придумала пару визуализаций, которые запилю, когда вернусь!
1. Карта выработки энергии и оценка её экологичности для всех стран мира.
https://app.electricitymaps.com/map
2. Недавно опубликовали очередной ежегодный отчёт State of CSS. Там про тренды, новые фичи, фреймворки и всё, что сейчас популярно в вёрстке.
https://2023.stateofcss.com
3. Открытая коллекция принципов и методов в дизайне. При чём как графическом, так и например, при проектировании дорог.
https://principles.design
4. Огромный список публичных API, которые можно свободно использовать в личных и не только проектах. От привычных всем финансовых и погодных до спортивных, музыкальных или автомобильных.
https://github.com/public-apis/public-apis
5. Статья, какие есть способы улучшить доступность графиков.
https://blog.pope.tech/2023/08/31/how-to-make-charts-and-graphs-more-accessible
Я уже месяц в большом путешествии по Латинской Америке. И ещё почти месяц впереди. Поэтому регулярные посты как-то не получаются. Зато я уже придумала пару визуализаций, которые запилю, когда вернусь!