За последнее время у меня собралось достаточно много ссылок на интересные инструменты и статьи про визуализации. Буду постепенно их разбирать и заодно ими тут делиться.
1. Charts.css — фреймворк для рисования графиков с помощью css. Поддерживает только простые графики типа линий, столбиков и областей. Зато ни строчки кода!
2. Color & Contrast — большой интерактивный гайд про теорию и восприятие цвета. Объясняет научные детали и какое отношение это всё имеет к дизайну интерфейсов.
3. Библиотека для рисования календарика как в профиле github. Если вы очень хотите что-то считать каждый день.
И в конце эксперименты с ML: как бы могли выглядеть визуализации, если бы их создавали известные художники.
1. Charts.css — фреймворк для рисования графиков с помощью css. Поддерживает только простые графики типа линий, столбиков и областей. Зато ни строчки кода!
2. Color & Contrast — большой интерактивный гайд про теорию и восприятие цвета. Объясняет научные детали и какое отношение это всё имеет к дизайну интерфейсов.
3. Библиотека для рисования календарика как в профиле github. Если вы очень хотите что-то считать каждый день.
И в конце эксперименты с ML: как бы могли выглядеть визуализации, если бы их создавали известные художники.
👍9❤5
На прошлой неделе я засветилась на канале Left Join в новом эпизоде подкаста “Data Heroes”.
Вместе с коллегами рассуждаю там про визуализации данных, их будущее и роль программирования в их создании. Особенно мне понравился формат: это не диалог, а хорошо смонтированные небольшие монологи гостей подкаста на разные темы.
Эпизод разбит на 2 части:
🔸Часть 1: Роман Бунин, Татьяна Мисютина, Наталия Степанова, Александр Богачев.
🔸Часть 2: Андрей Дорожный, Анастасия Кузнецова, Никита Рокотян.
Отдельно большой список крутых ресурсов и ссылок, которые советуют спикеры.
Вместе с коллегами рассуждаю там про визуализации данных, их будущее и роль программирования в их создании. Особенно мне понравился формат: это не диалог, а хорошо смонтированные небольшие монологи гостей подкаста на разные темы.
Эпизод разбит на 2 части:
🔸Часть 1: Роман Бунин, Татьяна Мисютина, Наталия Степанова, Александр Богачев.
🔸Часть 2: Андрей Дорожный, Анастасия Кузнецова, Никита Рокотян.
Отдельно большой список крутых ресурсов и ссылок, которые советуют спикеры.
🔥2
Как я нарисовала программу на языке Piet
Когда-то давно я абсолютно случайно наткнулась на эзотерические языки программирования. Чаще всего эти языки придумываются ради шутки или экспериментов и по-настоящему на них никто не программирует. Тем не менее для этих языков создают и среды разработки, и интерпретаторы с компиляторами — после появления они начинают жить своей жизнью.
Piet — это такой язык. Меня он особенно заинтересовал, потому что вдохновлён картинами Пита Мондриана, а я очень люблю абстрактное искусство. Поэтому несколько лет я держала в голове личную хотелку — написать программу на Piet.
И вот это случилось! Я написала небольшую программу, которая находит сумму переданных положительных чисел. И описала это в небольшой статье. Там много объяснений и расшифровки кода, с цветными картинками. Надеюсь, получилось не занудно.
https://teletype.in/@gnykka/piet
Подумываю и другие эзотерические языки в будущем попробовать. Например, сонеты в духе Шекспира начать писать…
Когда-то давно я абсолютно случайно наткнулась на эзотерические языки программирования. Чаще всего эти языки придумываются ради шутки или экспериментов и по-настоящему на них никто не программирует. Тем не менее для этих языков создают и среды разработки, и интерпретаторы с компиляторами — после появления они начинают жить своей жизнью.
Piet — это такой язык. Меня он особенно заинтересовал, потому что вдохновлён картинами Пита Мондриана, а я очень люблю абстрактное искусство. Поэтому несколько лет я держала в голове личную хотелку — написать программу на Piet.
И вот это случилось! Я написала небольшую программу, которая находит сумму переданных положительных чисел. И описала это в небольшой статье. Там много объяснений и расшифровки кода, с цветными картинками. Надеюсь, получилось не занудно.
https://teletype.in/@gnykka/piet
Подумываю и другие эзотерические языки в будущем попробовать. Например, сонеты в духе Шекспира начать писать…
Teletype
Язык Piet: программы, выглядящие как абстрактные картины
Piet — эзотерический язык программирования, придуманный для развлечения. Я нарисовала на нём программу, и рассказываю, как я это сделала.
🔥14😁2🆒2
Обзор цветовых форматов
Не так давно в одной из рассылок, которые я читаю, мне попалась большая статья-обзор на разные цветовые форматы в 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
👍5
Собрала тут маленькую подборку интересного из того, что встречала в разных рассылках в январе.
📊 22 лучшие визуализации 2022 года от Visualcapitalist.
📊 Тренды в научных визуализациях в 2022 году. Там любопытно: цветовые схемы, таблицы-графики, спарклайны, разрывные оси, …
📝 История создания визуализации снежного покрова в США. Концепция, скетчи и много кода на R.
🗺 Проект с минималистическими визуализациями геоданных. Автор показывает мосты, перекрёстки, станции метро и прочее одновременно информативно и максимально абстрактно.
🎱 В копилочку моего любимого — туториалы по моделированию физических явлений. Среди прочего: движение ткани, течение жидкости, столкновение шаров. Код написан на JavaScript.
📊 22 лучшие визуализации 2022 года от Visualcapitalist.
📊 Тренды в научных визуализациях в 2022 году. Там любопытно: цветовые схемы, таблицы-графики, спарклайны, разрывные оси, …
📝 История создания визуализации снежного покрова в США. Концепция, скетчи и много кода на R.
🗺 Проект с минималистическими визуализациями геоданных. Автор показывает мосты, перекрёстки, станции метро и прочее одновременно информативно и максимально абстрактно.
🎱 В копилочку моего любимого — туториалы по моделированию физических явлений. Среди прочего: движение ткани, течение жидкости, столкновение шаров. Код написан на JavaScript.
👍9
Как сделать 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 #статья
🔥10❤4
Любопытная визуализация как выглядела Земля много миллионов лет назад:
https://dinosaurpictures.org/ancient-earth/#750
Можно покрутить и понаблюдать, как двигались и менялись континенты.
Как и все подобные штуки сделана на three.js.
https://dinosaurpictures.org/ancient-earth/#750
Можно покрутить и понаблюдать, как двигались и менялись континенты.
Как и все подобные штуки сделана на three.js.
👍5❤2😱1
Недавно в одной рассылке мне попалась статья 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
👍2❤1
Собрала в выходные подборку любопытных визуализаций, которые встретились и запомнились мне за последний месяц.
🌪️ Интерактивная карта с крупными ветряными электростанциями Великобритании. Показывает их расположение и сколько энергии производит каждая из них.
⚙️ Скроллителлинг, рассказывающий, как работает квантовый компьютер.
🗺️ Исследование о гендерном неравенстве на примере имён улиц в Порто. В честь женщин названо в 9 раз меньше улиц, чем в честь мужчин, а самые крупные названные посвящены святым.
🍷 Визуализация сколько и какого алкоголя пьют в разных странах за одну неделю.
🌪️ Интерактивная карта с крупными ветряными электростанциями Великобритании. Показывает их расположение и сколько энергии производит каждая из них.
⚙️ Скроллителлинг, рассказывающий, как работает квантовый компьютер.
🗺️ Исследование о гендерном неравенстве на примере имён улиц в Порто. В честь женщин названо в 9 раз меньше улиц, чем в честь мужчин, а самые крупные названные посвящены святым.
🍷 Визуализация сколько и какого алкоголя пьют в разных странах за одну неделю.
👍7🔥4
Давно хотела поделиться: года три назад для одного личного исследования я сделала демо, где сравнила 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 ⚠️, на слабых компьютерах это может подвесить браузер.
🔥17❤5👏2
Мы с коллегами собрали папку каналов про визуализации данных. Внутри много красивых графиков, дата-арт, журналистика и полезная теория. Я уже давно на все подписана и вам советую!
Designing Numbers
Настенька и графики
Data-comics
Виз Ньюз
Reveal the Data
data.csv
Чартомойка
Рациональные числа
Дата-сторителлинг
novichkov.net
Designing Numbers
Настенька и графики
Data-comics
Виз Ньюз
Reveal the Data
data.csv
Чартомойка
Рациональные числа
Дата-сторителлинг
novichkov.net
❤🔥15👎1💩1🤡1
Всем привет!
Вчера в мой небольшой уютный канал пришло много новых людей, поэтому я решила написать пост приветствие.
Меня зовут Наташа и я разработчица. Я делаю визуализации данных и веб-проекты разной сложности. Начинала в лаборатории МГУ с совместных проектов с Microsoft Research, потом осваивала фронтенд в Лаборатории Данных, а последние лет 6 работаю на себя и развиваю своё бюро разработки slay_lines.
Этот канал — моё хоть и профессиональное, но всё же хобби. Поэтому веду я его не очень регулярно.
Здесь всё так или иначе крутится вокруг программирования. Я выкладываю ссылки на интересные мне визуализации или инструменты, иногда пишу туториалы по D3js, иногда — обзоры на прочитанные статьи или книги. Ещё показываю разные демо, которые могу сделать на досуге.
Welcome! 📊
Вчера в мой небольшой уютный канал пришло много новых людей, поэтому я решила написать пост приветствие.
Меня зовут Наташа и я разработчица. Я делаю визуализации данных и веб-проекты разной сложности. Начинала в лаборатории МГУ с совместных проектов с Microsoft Research, потом осваивала фронтенд в Лаборатории Данных, а последние лет 6 работаю на себя и развиваю своё бюро разработки slay_lines.
Этот канал — моё хоть и профессиональное, но всё же хобби. Поэтому веду я его не очень регулярно.
Здесь всё так или иначе крутится вокруг программирования. Я выкладываю ссылки на интересные мне визуализации или инструменты, иногда пишу туториалы по D3js, иногда — обзоры на прочитанные статьи или книги. Ещё показываю разные демо, которые могу сделать на досуге.
Welcome! 📊
❤🔥39👍26❤4🤮2💩2👎1
Раз в несколько месяцев я люблю участвовать в челенджах от 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. В итоге частица оказывается на своём старом месте.❤15🔥11👍4
Наткнулась недавно на небольшую статью с необычными визуализациями.
В 1952 году фотограф Гьен Мили сделал серию фотографий скрипача Яши Хейфеца. Идея была в попытке поймать и показать движения смычка при игре на скрипке. Для этого на смычок в районе руки музыканта был прикреплён источник света, Хейфец играл в темноте, а Мили снимал его с длинной выдержкой.
В 1952 году фотограф Гьен Мили сделал серию фотографий скрипача Яши Хейфеца. Идея была в попытке поймать и показать движения смычка при игре на скрипке. Для этого на смычок в районе руки музыканта был прикреплён источник света, Хейфец играл в темноте, а Мили снимал его с длинной выдержкой.
❤21🔥11👍4
Возвращаюсь с небольшой подборкой интересного, на что наткнулась за последние месяцы.
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
Я уже месяц в большом путешествии по Латинской Америке. И ещё почти месяц впереди. Поэтому регулярные посты как-то не получаются. Зато я уже придумала пару визуализаций, которые запилю, когда вернусь!
👍15⚡4❤1
Пока я тут путешествовала, выложили шортлист премии Information is Beautiful!
В этом году туда попали несколько работ знакомых:
1. Визуализация рынка акций США Market Map от Никиты Рокотяна в категории Business Analytics.
2. Визуализация Divided World с разными экономическими показателями в разных странах от Ромы Бунина в категории Humanitarian.
3. Постер по рок-опере Jesus Christ Superstar от Нади Андриановой в категории Arts, Entertainment & Culture.
И ещё одна необычная работа из России:
Инсталяция про загрязнение воздуха в категории Unusual.
И отдельно ещё пара работ, которые мне очень понравились.
1. When I Was Your Age — сравнение привычек американцев разных поколений.
2. Библиотека цветов традиционной китайской живописи.
До конца этой недели ещё можно проголосовать, чтобы помочь работам получить приз зрительстких симпатий! Для этого нужно зарегистрироваться на сайте и на странице каждой работы нажать кнопку “Vote”. Можно проголосовать только 1 раз в каждой категории.
В этом году туда попали несколько работ знакомых:
1. Визуализация рынка акций США Market Map от Никиты Рокотяна в категории Business Analytics.
2. Визуализация Divided World с разными экономическими показателями в разных странах от Ромы Бунина в категории Humanitarian.
3. Постер по рок-опере Jesus Christ Superstar от Нади Андриановой в категории Arts, Entertainment & Culture.
И ещё одна необычная работа из России:
Инсталяция про загрязнение воздуха в категории Unusual.
И отдельно ещё пара работ, которые мне очень понравились.
1. When I Was Your Age — сравнение привычек американцев разных поколений.
2. Библиотека цветов традиционной китайской живописи.
До конца этой недели ещё можно проголосовать, чтобы помочь работам получить приз зрительстких симпатий! Для этого нужно зарегистрироваться на сайте и на странице каждой работы нажать кнопку “Vote”. Можно проголосовать только 1 раз в каждой категории.
❤8👍1
Визуализация собрания Нью-Йоркского музея современного искусства
Наткнулась на официальный dataset нью-йоркского Museum of Modearn Art. Это почти 200 тысяч произведений искусства из коллекций музея и 15 тысяч их авторов. Изначально я просто хотела выложить его в одной из следующих подборок, а потом подумала и решила сначала с ним поиграться.
Данные огромны и анализировать их можно с разных сторон, но я решила сфокусироваться только на художниках 20 и 21 веков. Для каждого автора у меня были имя, пол, годы жизни и национальность. К этому набору я добавила ещё и количество написанных картин. Для этого я взяла список всех произведений, отфильтровала, оставив только картины, и сгрупировала по авторам. У меня получился массив из 8.5 тысяч художников.
Я решила посмотреть распределение художников по годам жизни: кто сколько писал, кто сколько прожил, в какие периоды было больше женщин и т.д. Поэтому мой график — это scatter plot с годом рождения по оси X и длиной жизни по оси Y. Размер — это количество работ (с логарифмической шкалой), а цвет — пол.
Для удобства сравнения и анализа я исключила авторов:
‣ у кого не оказалось работ — нечего было бы визуализировать;
‣ кто до сих пор жив — они смазывали картину, оказываясь строго на диагонали;
‣ кто родился после 1970ого или прожил меньше 30 лет — их было мало и они слишком выбивались.
В итоге у меня остались 765 художников. Из них у 448 было больше одной работы, а у 203 — больше четырёх. Именно их я и включила в график, добавив фильтры и легенду для детального исследования.
Поиграться с визуализацией и поисследовать самостоятельно можно здесь:
🔗 https://gnykka.io/moma-artists
Топ 5 авторов по количеству работ:
— Ellsworth Kelly — 1037 работ. Американец, прожил 92 года, представитель минимализма, хард-эйджа и цветовых полей.
— Frédéric Bruly Bouabré — 481 работа. Ивуариец, прожил 90 лет, в 25 лет ему явилось какое-то видение и с этого момента он стал своего рода проповедником и философом и выражал свои идеи в картинах.
— George Maciunas — 205 работ. Тоже американец, русско-литовского происхождения, умер от рака в 46 лет, был одним из основателей художественного течения флуксус.
— Jean Dubuffet — 189 работ. Француз, прожил 83 года, был основоположником направления ар-брют — «грубого» или «сырого» искусства.
— Ree Morton — 83 работы. Американка, единственная женщина в первой десятке, погибла в автокатастрофе в 40 лет, представительница пост-минимализма и феминистского искусства.
Ещё наткнулась:
— Alberto Greco — 37 работ. Аргентинец, совершил самоубийство в 35 лет, превратив свою смерть в перформанс.
Как я и ожидала, наибольшее количество произведений в музее принадлежит американским художникам. На втором месте немцы, на третьем французы. Потом британцы, итальянцы, аргентинцы и бразильцы. Женщин заметно меньше, чем мужчин, но это, к сожалению, типично для искусства прошлых веков.
Наткнулась на официальный dataset нью-йоркского Museum of Modearn Art. Это почти 200 тысяч произведений искусства из коллекций музея и 15 тысяч их авторов. Изначально я просто хотела выложить его в одной из следующих подборок, а потом подумала и решила сначала с ним поиграться.
Данные огромны и анализировать их можно с разных сторон, но я решила сфокусироваться только на художниках 20 и 21 веков. Для каждого автора у меня были имя, пол, годы жизни и национальность. К этому набору я добавила ещё и количество написанных картин. Для этого я взяла список всех произведений, отфильтровала, оставив только картины, и сгрупировала по авторам. У меня получился массив из 8.5 тысяч художников.
Я решила посмотреть распределение художников по годам жизни: кто сколько писал, кто сколько прожил, в какие периоды было больше женщин и т.д. Поэтому мой график — это scatter plot с годом рождения по оси X и длиной жизни по оси Y. Размер — это количество работ (с логарифмической шкалой), а цвет — пол.
Для удобства сравнения и анализа я исключила авторов:
‣ у кого не оказалось работ — нечего было бы визуализировать;
‣ кто до сих пор жив — они смазывали картину, оказываясь строго на диагонали;
‣ кто родился после 1970ого или прожил меньше 30 лет — их было мало и они слишком выбивались.
В итоге у меня остались 765 художников. Из них у 448 было больше одной работы, а у 203 — больше четырёх. Именно их я и включила в график, добавив фильтры и легенду для детального исследования.
Поиграться с визуализацией и поисследовать самостоятельно можно здесь:
🔗 https://gnykka.io/moma-artists
Топ 5 авторов по количеству работ:
— Ellsworth Kelly — 1037 работ. Американец, прожил 92 года, представитель минимализма, хард-эйджа и цветовых полей.
— Frédéric Bruly Bouabré — 481 работа. Ивуариец, прожил 90 лет, в 25 лет ему явилось какое-то видение и с этого момента он стал своего рода проповедником и философом и выражал свои идеи в картинах.
— George Maciunas — 205 работ. Тоже американец, русско-литовского происхождения, умер от рака в 46 лет, был одним из основателей художественного течения флуксус.
— Jean Dubuffet — 189 работ. Француз, прожил 83 года, был основоположником направления ар-брют — «грубого» или «сырого» искусства.
— Ree Morton — 83 работы. Американка, единственная женщина в первой десятке, погибла в автокатастрофе в 40 лет, представительница пост-минимализма и феминистского искусства.
Ещё наткнулась:
— Alberto Greco — 37 работ. Аргентинец, совершил самоубийство в 35 лет, превратив свою смерть в перформанс.
Как я и ожидала, наибольшее количество произведений в музее принадлежит американским художникам. На втором месте немцы, на третьем французы. Потом британцы, итальянцы, аргентинцы и бразильцы. Женщин заметно меньше, чем мужчин, но это, к сожалению, типично для искусства прошлых веков.
🔥8👍6❤4
Как не сойти с ума, работая в путешествиях
Иногда буду здесь писать не только про визуализации и программирование, но и про удалённую работу и всякое с ней связанное. Как-то так вышло, что я работаю удалённо почти с самого начала своей карьеры. А ещё я люблю путешествовать. И часто совмещаю работу и путешествия.
Эта заметка — моя попытка сформулировать основные лайфхаки, которые я накопила за почти десять лет нерегулярного цифрового кочевничества.
✔️ Рабочие путешествия должны быть долгими
Это может казаться проблемами первого мира, но любое путешествие — выход из зоны комфорта. Если в работе важно сохранять стабильность и привычный темп, то частые перемещения точно будут этому мешать. Поэтому я всегда стараюсь планировать любые переезды на выходные и задерживаюсь в каждом месте хотя бы на неделю, а в идеале на месяц.
✔️ Интернет — главный критерий выбора жилья
Почти всегда я ищу квартиры и отели на Airbnb и Booking и внимательно читаю отзывы. Главный мой фокус в отзывах — информация об интернете. Если по всем критериям место супер, но в отзывах пишут, что интернет плохой, то я ищу другой вариант. Потому что самые большие стрессы мне приносила именно плохая связь на важных созвонах.
✔️ Планируйте неделю заранее
В воскресенье, ещё до начала рабочей недели я сажусь и расписываю все свои задачи и созвоны. В итоге у меня перед глазами всегда есть расписание дел и я всегда знаю, какие дни у меня занятые, а какие свободные. Я так делаю и в обычной жизни дома, но в поездках это становится особенно важным.
✔️ Расслабьтесь и не спешите
Очень сложно совмещать осмотр достопримечательностей любого города и активную полноценную работу. Поэтому для меня самым удобным оказалось чередовать: день на прогулки и музеи, день на работу. Конечно, в итоге какие-то дни я просижу дома за ноутбуком, но зато я и не выгорю от попыток объять необъятное.
✔️ Рутина очень важна
В любом новом городе важно сразу выстроить повседневную рутину: найти ближайшие магазины и рестораны, разобраться с транспортом, запомнить карту и прочее. А бытовые привычки вроде утреннего кофе на балконе или вечерней прогулки по набережной неплохо снижают стресс от очередного переезда.
Эти пять пунктов — это главное, что помогает мне контролировать время и сохранять продуктивность и рассудок в любых поездках. Проверено на личном опыте!
Иногда буду здесь писать не только про визуализации и программирование, но и про удалённую работу и всякое с ней связанное. Как-то так вышло, что я работаю удалённо почти с самого начала своей карьеры. А ещё я люблю путешествовать. И часто совмещаю работу и путешествия.
Эта заметка — моя попытка сформулировать основные лайфхаки, которые я накопила за почти десять лет нерегулярного цифрового кочевничества.
✔️ Рабочие путешествия должны быть долгими
Это может казаться проблемами первого мира, но любое путешествие — выход из зоны комфорта. Если в работе важно сохранять стабильность и привычный темп, то частые перемещения точно будут этому мешать. Поэтому я всегда стараюсь планировать любые переезды на выходные и задерживаюсь в каждом месте хотя бы на неделю, а в идеале на месяц.
✔️ Интернет — главный критерий выбора жилья
Почти всегда я ищу квартиры и отели на Airbnb и Booking и внимательно читаю отзывы. Главный мой фокус в отзывах — информация об интернете. Если по всем критериям место супер, но в отзывах пишут, что интернет плохой, то я ищу другой вариант. Потому что самые большие стрессы мне приносила именно плохая связь на важных созвонах.
✔️ Планируйте неделю заранее
В воскресенье, ещё до начала рабочей недели я сажусь и расписываю все свои задачи и созвоны. В итоге у меня перед глазами всегда есть расписание дел и я всегда знаю, какие дни у меня занятые, а какие свободные. Я так делаю и в обычной жизни дома, но в поездках это становится особенно важным.
✔️ Расслабьтесь и не спешите
Очень сложно совмещать осмотр достопримечательностей любого города и активную полноценную работу. Поэтому для меня самым удобным оказалось чередовать: день на прогулки и музеи, день на работу. Конечно, в итоге какие-то дни я просижу дома за ноутбуком, но зато я и не выгорю от попыток объять необъятное.
✔️ Рутина очень важна
В любом новом городе важно сразу выстроить повседневную рутину: найти ближайшие магазины и рестораны, разобраться с транспортом, запомнить карту и прочее. А бытовые привычки вроде утреннего кофе на балконе или вечерней прогулки по набережной неплохо снижают стресс от очередного переезда.
Эти пять пунктов — это главное, что помогает мне контролировать время и сохранять продуктивность и рассудок в любых поездках. Проверено на личном опыте!
❤18👍12🔥4🥰3
Смотрите, какую интересную штуку нашла!
Это шрифты, которые выглядят как линейный график или столбчатая диаграмма.
Каждый символ закодирован определённым числом:
- Цифры 0..9 — это значения 0..90 с шагом 10.
- Буквы a..zA..Z — значения 0..100 с шагом 2.
- Юникод символы (U+0100..U+017F) — значения 0…127 с шагом 1.
Можно скачать с Google Fonts:
1. Linefont
2. Wavefont
Идеально для простеньких спарклайнов.
Это шрифты, которые выглядят как линейный график или столбчатая диаграмма.
Каждый символ закодирован определённым числом:
- Цифры 0..9 — это значения 0..90 с шагом 10.
- Буквы a..zA..Z — значения 0..100 с шагом 2.
- Юникод символы (U+0100..U+017F) — значения 0…127 с шагом 1.
Можно скачать с Google Fonts:
1. Linefont
2. Wavefont
Идеально для простеньких спарклайнов.
🔥23👍9❤6👌1
Недавно авторы канала Data Driven культура предложили мне собрать небольшую подборку ресурсов про визуализации данных. И я подумала, что никогда ничего подобного здесь не выкладывала!
Я задала себе вопрос: «С чего начать и чем вдохновляться в обучении визуализациям?». И из ответа появился список из десятка пунктов (часть из которых вы наверняка знаете). В него, конечно, не вошло множество интересных книг и крутых специалистов, но чтобы охватить всё, потребовалось бы намного больше места.
Книги
1. Edward Tufte и его книги по информационному дизайну. "The Visual Display of Quantitative Information" — настоящая классика, которую можно назвать библией для графиков. Официального перевода не существует (автор не разрешает), но в сети можно найти неофициальные, а сама книга написана достаточно простым английским языком.
2. Don Norman, "The Design of Everyday Things". Эта книга — основа понимания дизайна и UX, заставляет задуматься о дизайне самых обыденных вещей. В России издана издательством МИФ.
Люди
1. Shirley Wu. Меня очень вдохновляют её аккуратный дизайн и художественные абстракции в визуализациях. У неё много доступных лекций и воркшопов по программированию, их можно найти на YouTube.
2. Nadieh Bremer создаёт удивительные визуализации на самые разнообразные темы.
3. Valentina D'Efilippo больше фокусируется на дизайне и смыслах. Её выступления и рассказы о создании визуализаций, включая Effective Data Visualisation, также доступны на YouTube.
Сайты
1. Information is Beautiful — обширная коллекция инфографик на самые разные темы, от статистики пород собак до доходов правительства Великобритании.
2. Pudding — интерактивные визуальные эссе.
3. Flowing Data — множество визуализаций и страниц с туториалами по их созданию.
4. Блог Datawrapper — статьи с примерами визуализаций и советами, например, по выбору цветовой палитры или подготовке данных.
5. D3.js — не удержалась и всё-таки включила пункт про код. Но и не только, на сайте можно найти множество примеров от простых до сложных с подробным разбором их создания.
Я задала себе вопрос: «С чего начать и чем вдохновляться в обучении визуализациям?». И из ответа появился список из десятка пунктов (часть из которых вы наверняка знаете). В него, конечно, не вошло множество интересных книг и крутых специалистов, но чтобы охватить всё, потребовалось бы намного больше места.
Книги
1. Edward Tufte и его книги по информационному дизайну. "The Visual Display of Quantitative Information" — настоящая классика, которую можно назвать библией для графиков. Официального перевода не существует (автор не разрешает), но в сети можно найти неофициальные, а сама книга написана достаточно простым английским языком.
2. Don Norman, "The Design of Everyday Things". Эта книга — основа понимания дизайна и UX, заставляет задуматься о дизайне самых обыденных вещей. В России издана издательством МИФ.
Люди
1. Shirley Wu. Меня очень вдохновляют её аккуратный дизайн и художественные абстракции в визуализациях. У неё много доступных лекций и воркшопов по программированию, их можно найти на YouTube.
2. Nadieh Bremer создаёт удивительные визуализации на самые разнообразные темы.
3. Valentina D'Efilippo больше фокусируется на дизайне и смыслах. Её выступления и рассказы о создании визуализаций, включая Effective Data Visualisation, также доступны на YouTube.
Сайты
1. Information is Beautiful — обширная коллекция инфографик на самые разные темы, от статистики пород собак до доходов правительства Великобритании.
2. Pudding — интерактивные визуальные эссе.
3. Flowing Data — множество визуализаций и страниц с туториалами по их созданию.
4. Блог Datawrapper — статьи с примерами визуализаций и советами, например, по выбору цветовой палитры или подготовке данных.
5. D3.js — не удержалась и всё-таки включила пункт про код. Но и не только, на сайте можно найти множество примеров от простых до сложных с подробным разбором их создания.
❤🔥22❤4