Всем привет!
Меня зовут Наташа. Последние 10 лет я так или иначе работаю с данными и программирую визуализации.
За много лет у меня скопилось много мыслей и наблюдений на тему отображения данных. Мне хочется поделиться своими знаниями и через этот процесс структурировать их.
В России область визуализации данных (в отличие от того же дизайна) развита не очень хорошо. Хочется начать это менять. Присоединяйтесь!
Меня зовут Наташа. Последние 10 лет я так или иначе работаю с данными и программирую визуализации.
За много лет у меня скопилось много мыслей и наблюдений на тему отображения данных. Мне хочется поделиться своими знаниями и через этот процесс структурировать их.
В России область визуализации данных (в отличие от того же дизайна) развита не очень хорошо. Хочется начать это менять. Присоединяйтесь!
👍1
Начать я хочу с примера, который немного рифмуется с текущими событиями.
В 1854 году в центральном Лондоне была вспышка холеры. Британский врач, доктор Джон Сноу (который очень много знал и даже стал основоположником эпидемиологии) исследовал эту вспышку и придумал нанести на карту точки в местах домов, где умирали люди. На получившейся картинке стало видно, что все смерти сконцентрированы на одной улице (Broad Street) вокруг одного колодца, снабжавшего водой весь район (обозначен крестиком посередине улицы). Когда колодец закрыли, эпидемия пошла на спад и вскоре закончилась.
#пример
В 1854 году в центральном Лондоне была вспышка холеры. Британский врач, доктор Джон Сноу (который очень много знал и даже стал основоположником эпидемиологии) исследовал эту вспышку и придумал нанести на карту точки в местах домов, где умирали люди. На получившейся картинке стало видно, что все смерти сконцентрированы на одной улице (Broad Street) вокруг одного колодца, снабжавшего водой весь район (обозначен крестиком посередине улицы). Когда колодец закрыли, эпидемия пошла на спад и вскоре закончилась.
#пример
👍1
Эдвард Тафти и его правила создания визуализаций
История и картинка выше взяты из книги Эдварда Тафти "The Visual Display of Quantitative Information". Эта книга — это, пожалуй, главная базовая книга в мире по визуализациям данных.
Эдвард Тафти — американский статистик и профессор Йельского университета. Он известен своими работами по информационному дизайну, придуманному им графику спарклайну (такие маленькие линии, рисуемые сразу в тексте, часто используются для отображения изменения курсов акций) и выпущенной серии книг. Первая редакция первой книги (именно её я упомянула выше) вышла ещё в 1983 году. Я покупала в 2013 году на американском Амазоне уже второе издание 2001 года.
Главное, что продвигал в своих книгах Тафти — чистота и честность отображения информации. На первом месте в любой визуализии должны быть данные, а не дизайн или интерпретация. Изучив множество примеров хороших и плохих графиков, Тафти придумал понятие "data-ink ratio", то есть коэффициент соотношения данных и чернил. Он вычисляется как отношение чернил, используемых для данных, ко всем чернилам графика.
Цель дизайнера при придумывании визуализации — максимизировать этот коэффициент. Тафти приводит несколько примеров разных графиков и их преобразований без потери смысла и данных. Например, графика свечей на картинке ниже. Я не всегда согласна с подобными радикальными изменениями. На мой взгляд, на восприятие и понимание графиков влияет их узнаваемость в том числе. Но я однозначно за убирание ненужного объёма, бессмысленных сеток и сплошных штриховок.
#книга #теория
История и картинка выше взяты из книги Эдварда Тафти "The Visual Display of Quantitative Information". Эта книга — это, пожалуй, главная базовая книга в мире по визуализациям данных.
Эдвард Тафти — американский статистик и профессор Йельского университета. Он известен своими работами по информационному дизайну, придуманному им графику спарклайну (такие маленькие линии, рисуемые сразу в тексте, часто используются для отображения изменения курсов акций) и выпущенной серии книг. Первая редакция первой книги (именно её я упомянула выше) вышла ещё в 1983 году. Я покупала в 2013 году на американском Амазоне уже второе издание 2001 года.
Главное, что продвигал в своих книгах Тафти — чистота и честность отображения информации. На первом месте в любой визуализии должны быть данные, а не дизайн или интерпретация. Изучив множество примеров хороших и плохих графиков, Тафти придумал понятие "data-ink ratio", то есть коэффициент соотношения данных и чернил. Он вычисляется как отношение чернил, используемых для данных, ко всем чернилам графика.
Цель дизайнера при придумывании визуализации — максимизировать этот коэффициент. Тафти приводит несколько примеров разных графиков и их преобразований без потери смысла и данных. Например, графика свечей на картинке ниже. Я не всегда согласна с подобными радикальными изменениями. На мой взгляд, на восприятие и понимание графиков влияет их узнаваемость в том числе. Но я однозначно за убирание ненужного объёма, бессмысленных сеток и сплошных штриховок.
#книга #теория
👍1
Визуализации сортировок
Иногда мне кажется, что сортировки — это такая базовая тема, которую все рано или поздно захотят (некоторые даже попробуют) визуализировать. Там есть и алгоритмы, и простор для дизайна, и динамика.
А вот три ссылки на очень классные визуализации, которые мне совершенно не надоедает рассматривать:
1. sorting.at — пошаговое сравнение разных алгоритмов, считает количество необходимых шагов.
2. Часть большой статьи Майка Бостока (автора библиотеки d3.js) про алгоритмы. Мне здесь очень нравится идея с сортировкой наклонённых палочек.
3. Видео сортировок в закрашенном разноцветными плитками квадрате с достаточно подробными объяснениями.
#алгоритмы #пример
Иногда мне кажется, что сортировки — это такая базовая тема, которую все рано или поздно захотят (некоторые даже попробуют) визуализировать. Там есть и алгоритмы, и простор для дизайна, и динамика.
А вот три ссылки на очень классные визуализации, которые мне совершенно не надоедает рассматривать:
1. sorting.at — пошаговое сравнение разных алгоритмов, считает количество необходимых шагов.
2. Часть большой статьи Майка Бостока (автора библиотеки d3.js) про алгоритмы. Мне здесь очень нравится идея с сортировкой наклонённых палочек.
3. Видео сортировок в закрашенном разноцветными плитками квадрате с достаточно подробными объяснениями.
#алгоритмы #пример
👍1
Выбор цвета
Когда-то я работала в команде, где очень любили использовать радужную палитру по умолчанию во всех графиках. В тот период я уже начала изучать основы дизайна и интересовалась теорией цвета. Однажды я наткнулась на серию статей Синтии Брюэр, где она рассказывала про подбор правильных палитр для разных типов данных в картографии.
Так я узнала, что радужная палитра не подходит ни в одной визуализации. У неё есть две основные проблемы:
1. Неоднородные яркость и сила цвета. Жёлтый цвет намного ярче фиолетового или синего, поэтому может больше бросаться в глаза на тёмном фоне или больше теряться на светлом.
2. Нет установленного порядка цветов, они зациклены. Если кодировать диапазон значений, то непонятно, какой цвет означает минимум, а какой — максимум.
В любом цвете есть три составляющих: оттенок (hue), насыщенность (saturation) и значение (value). Эти параметры собираются в цветовую модель HSV. Иногда вместо насыщенности цвета используют параметр светлоты (lightness), это модель HSL. Модель HSV более интуитивно описывает цвет, чем известная всем RGB. Не «сколько в этом цвете красного или зелёного?», а «какой у этого цвета оттенок, насколько он насыщенный?».
Сама я обычно выбираю для визуализаций любимые цвета. Но если этого недостаточно, то использую несколько правил:
1. Стараюсь учитывать стандартные стереотипы. Синий цвет — холодный, красный — горячий, оттенки голубого и синего — глубина, оттенки коричневого — высота, зелёный — успех, красный — ошибка и т.д.
2. Изучаю данные и сам график. Если данные — диапазон значений одного типа, то можно зафиксировать оттенок. Если данные — разные категории, то можно наоборот менять только оттенок.
3. Цвет, как и дизайн в целом, не должны отвлекать от данных. Если визуализация непонятна в чёрно-белом варианте, то выбор цвета ничего не изменит.
А чтобы каждый раз не придумывать палитры самостоятелько, их можно подсматривать в сервисе Color Brewer.
#теория #цвет
Когда-то я работала в команде, где очень любили использовать радужную палитру по умолчанию во всех графиках. В тот период я уже начала изучать основы дизайна и интересовалась теорией цвета. Однажды я наткнулась на серию статей Синтии Брюэр, где она рассказывала про подбор правильных палитр для разных типов данных в картографии.
Так я узнала, что радужная палитра не подходит ни в одной визуализации. У неё есть две основные проблемы:
1. Неоднородные яркость и сила цвета. Жёлтый цвет намного ярче фиолетового или синего, поэтому может больше бросаться в глаза на тёмном фоне или больше теряться на светлом.
2. Нет установленного порядка цветов, они зациклены. Если кодировать диапазон значений, то непонятно, какой цвет означает минимум, а какой — максимум.
В любом цвете есть три составляющих: оттенок (hue), насыщенность (saturation) и значение (value). Эти параметры собираются в цветовую модель HSV. Иногда вместо насыщенности цвета используют параметр светлоты (lightness), это модель HSL. Модель HSV более интуитивно описывает цвет, чем известная всем RGB. Не «сколько в этом цвете красного или зелёного?», а «какой у этого цвета оттенок, насколько он насыщенный?».
Сама я обычно выбираю для визуализаций любимые цвета. Но если этого недостаточно, то использую несколько правил:
1. Стараюсь учитывать стандартные стереотипы. Синий цвет — холодный, красный — горячий, оттенки голубого и синего — глубина, оттенки коричневого — высота, зелёный — успех, красный — ошибка и т.д.
2. Изучаю данные и сам график. Если данные — диапазон значений одного типа, то можно зафиксировать оттенок. Если данные — разные категории, то можно наоборот менять только оттенок.
3. Цвет, как и дизайн в целом, не должны отвлекать от данных. Если визуализация непонятна в чёрно-белом варианте, то выбор цвета ничего не изменит.
А чтобы каждый раз не придумывать палитры самостоятелько, их можно подсматривать в сервисе Color Brewer.
#теория #цвет
👍1
Таймлайн основания европейских городов
В прошлые выходные я доделала новую визуализацию:
🔗 таймлайн основания европейских городов
Идея пришла мне в голову зимой в поездке по Золотому кольцу. Мне стало интересно проследить историю возникновения и развития городов древней Руси. Я попробовала найти данные, но тут возникли проблемы. Без вдумчивого и детального исследования выяснить состояние городов почти тысячу лет назад оказалось практически невозможно. Поэтому для начала я решила упростить задачу и взять только года основания. В итоге ограничиваться только Русью мне показалось скучным, и я расширила задумку на Европу.
Я выбрала 64 города (из них 11 российских) — столицы или крупные центры, существующие в настоящее время. Решила ограничить временной период, поэтому Древняя Греция в данные не вошла, а Римская империя уже вошла. Все данные я взяла из англоязычной википедии. До нашей эры года в основном приблизительные и округлённые, после нашей эры нашлись уже более точные значения.
Весь код написан на чистом JavaScript. Для рисования карты я использую Leaflet с Stamen тайлами. Последнее время они мне нравятся больше всего, потому что у них очень мало деталей и есть чёрно-белый вариант, который не акцентирует на себе внимание.
#визуализация
В прошлые выходные я доделала новую визуализацию:
🔗 таймлайн основания европейских городов
Идея пришла мне в голову зимой в поездке по Золотому кольцу. Мне стало интересно проследить историю возникновения и развития городов древней Руси. Я попробовала найти данные, но тут возникли проблемы. Без вдумчивого и детального исследования выяснить состояние городов почти тысячу лет назад оказалось практически невозможно. Поэтому для начала я решила упростить задачу и взять только года основания. В итоге ограничиваться только Русью мне показалось скучным, и я расширила задумку на Европу.
Я выбрала 64 города (из них 11 российских) — столицы или крупные центры, существующие в настоящее время. Решила ограничить временной период, поэтому Древняя Греция в данные не вошла, а Римская империя уже вошла. Все данные я взяла из англоязычной википедии. До нашей эры года в основном приблизительные и округлённые, после нашей эры нашлись уже более точные значения.
Весь код написан на чистом JavaScript. Для рисования карты я использую Leaflet с Stamen тайлами. Последнее время они мне нравятся больше всего, потому что у них очень мало деталей и есть чёрно-белый вариант, который не акцентирует на себе внимание.
#визуализация
gnykka.io
European Cities Timeline
Frontend development, visualizations and pixel art.
🔥2
Оптимизация скорости
Хочу оставить здесь две ссылки, которые регулярно приходится искать:
https://gist.github.com/paulirish/5d52fb081b3570c81e3a
https://csstriggers.com/
Они про оптимизацию скорости отрисовки страницы в браузере при изменении разных свойств элементов в JS и CSS.
Каждый раз, когда что-то меняется в коде, браузер делает операции reflow (перестроение дерева DOM элементов) и repaint (изменение внешнего вида элементов). Иногда эти операции могут быть очень тяжёлыми и могут очень сильно замедлить отрисовку.
Например, вычисление
Если подробнее, то вот это хороший курс на тему, который я когда-то сама смотрела:
https://www.udacity.com/course/browser-rendering-optimization--ud860
#практика #оптимизация
Хочу оставить здесь две ссылки, которые регулярно приходится искать:
https://gist.github.com/paulirish/5d52fb081b3570c81e3a
https://csstriggers.com/
Они про оптимизацию скорости отрисовки страницы в браузере при изменении разных свойств элементов в JS и CSS.
Каждый раз, когда что-то меняется в коде, браузер делает операции reflow (перестроение дерева DOM элементов) и repaint (изменение внешнего вида элементов). Иногда эти операции могут быть очень тяжёлыми и могут очень сильно замедлить отрисовку.
Например, вычисление
element.offsetWidth в цикле может иногда привести к заметным зависаниям. А изменение свойств transform или opacity работает обычно быстрее, чем абсолютное позиционирование, потому что не влияет на элементы вокруг и использует аппаратное ускорение.Если подробнее, то вот это хороший курс на тему, который я когда-то сама смотрела:
https://www.udacity.com/course/browser-rendering-optimization--ud860
#практика #оптимизация
👍1
Для вдохновения
Очень классный пример, как даже из ошибок можно сделать артпроект. В инстаграме DataGlitches собраны наброски, черновики и ошибки при создании разных визуализаций. Некоторые прямо как готовые картины выглядят.
Ещё иногда я люблю рассматривать генеративную графику. И тут у меня есть 2 сайта с крутыми примерами: Tyler Hobbs и Generated Space.
#ссылки
Очень классный пример, как даже из ошибок можно сделать артпроект. В инстаграме DataGlitches собраны наброски, черновики и ошибки при создании разных визуализаций. Некоторые прямо как готовые картины выглядят.
Ещё иногда я люблю рассматривать генеративную графику. И тут у меня есть 2 сайта с крутыми примерами: Tyler Hobbs и Generated Space.
#ссылки
Tyler Hobbs
Home | Tyler Hobbs
The artwork of Tyler Hobbs, a practicing generative artist, creative coder, and painter, whose work has been featured in numerous exhibitions and has been...
👍1
Как инвертировать фото с помощью HTML5 canvas
Сегодня работа как-то не клеилась, поэтому я решила поучаствовать в еженедельном Codepen Challenge. В этот раз тема — эффекты наведения на изображениях.
https://codepen.io/gnykka/pen/LYpxJEe
Это небольшой пример инвертирования части картинки. Я загружаю фото, рисую его на HTML5 canvas, попутно сохраняя и инвертируя цвета. При наведении мышки я определяю, какая часть изображения попала в область, и рисую её в инвертированном варианте.
Похожий подход я использовала, когда делала один из проектов в прошлогоднем Парке Интуиции, MDWRLD. Там все фото и картинки рисуются на наскольких canvas. Они смещаются с разной скоростью и этим создают эффект параллакса. Быстрой перерисовки и плавности скролла удалось добиться благодаря предобработке фото при загрузке. Каждое фото загружается, запоминается в виде последовательности своих пикселей и на всякий случай сразу же инвертируется. А потом уже очень просто при любом сдвиге поместить эту последовательность в новое место.
Главная проблема canvas в том, что обычно при любых изменениях перерисовывать приходится сразу всё. В noscript проще — изменил один элемент и всё готово. Ну и векторная графика прекрасно масштабируется, а на canvas вечно надо ухищряться, чтобы избежать размытости.
#практика #canvas
Сегодня работа как-то не клеилась, поэтому я решила поучаствовать в еженедельном Codepen Challenge. В этот раз тема — эффекты наведения на изображениях.
https://codepen.io/gnykka/pen/LYpxJEe
Это небольшой пример инвертирования части картинки. Я загружаю фото, рисую его на HTML5 canvas, попутно сохраняя и инвертируя цвета. При наведении мышки я определяю, какая часть изображения попала в область, и рисую её в инвертированном варианте.
Похожий подход я использовала, когда делала один из проектов в прошлогоднем Парке Интуиции, MDWRLD. Там все фото и картинки рисуются на наскольких canvas. Они смещаются с разной скоростью и этим создают эффект параллакса. Быстрой перерисовки и плавности скролла удалось добиться благодаря предобработке фото при загрузке. Каждое фото загружается, запоминается в виде последовательности своих пикселей и на всякий случай сразу же инвертируется. А потом уже очень просто при любом сдвиге поместить эту последовательность в новое место.
Главная проблема canvas в том, что обычно при любых изменениях перерисовывать приходится сразу всё. В noscript проще — изменил один элемент и всё готово. Ну и векторная графика прекрасно масштабируется, а на canvas вечно надо ухищряться, чтобы избежать размытости.
#практика #canvas
MDWRLD
Inspiration and great creative power!
👍1
Визуализации коронавируса
Главная тема последних месяцев — коронавирус. И в визуализациях тоже. Дня не проходит, чтобы я не наткнулась на десяток новых графиков: лайнграфы, карты, сравнения стран, сложная аналитика, и прочее, и прочее.
Сначала я тоже думала: о, прекрасная тема для анализа, большой масштаб, полно официальных данных — идеально же! А потом, размышляя над этим подробнее, я поняла, что в подобной ситуации делать визуализации — плохая мысль. Даже, можно сказать, вредная.
Любая аналитика, особенно в виде красочной картинки, оказывает влияние на людей. Если анализ драматичен и эффектен, то это бесспорно вызовет вау эффект. А ещё это может заставить кого-то нервничать. Или вселить надежду, возможно даже опасно ложную.
Ещё есть проблема в самих данных. Не очень понятно, как сравнивать страны между собой. Китай скорее всего врёт (у них даже умершие задним числом прибавляются), в Германии и США тесты делаются всем подряд, а в каких-нибудь Камбодже или Индонезии вообще нормальной медицины в их местных джунглях нет. Я была в Камбодже, какие там самодистанцирование и официальная статистика?
Или взять процент смертности. Немцы делают огромное количество тестов, поэтому выявляют много бессимптомных случаев. А в Италии тесты вначале делали только в больницах, поэтому процент положительных тестов был выше, тяжёлых случаев больше, смертность выше. Я сейчас сижу в Турции, она на седьмом месте по общему числу случаев заражения, но почти все они в Стамбуле. Означает ли это, что в Турции сейчас опасно?
Если честно, у меня нет ответов на подобные вопросы. Я сама смотрю официальную статистику, но стараюсь ориентироваться и сравнивать внутри одной страны. Вот что было бы интересно сделать — изучить данные на предмет аномалий и попробовать понять, где и что неточно. Но тут тоже возникает вопрос — как понять, что что-то неточно, когда сравнить не с чем?
#мысли
Главная тема последних месяцев — коронавирус. И в визуализациях тоже. Дня не проходит, чтобы я не наткнулась на десяток новых графиков: лайнграфы, карты, сравнения стран, сложная аналитика, и прочее, и прочее.
Сначала я тоже думала: о, прекрасная тема для анализа, большой масштаб, полно официальных данных — идеально же! А потом, размышляя над этим подробнее, я поняла, что в подобной ситуации делать визуализации — плохая мысль. Даже, можно сказать, вредная.
Любая аналитика, особенно в виде красочной картинки, оказывает влияние на людей. Если анализ драматичен и эффектен, то это бесспорно вызовет вау эффект. А ещё это может заставить кого-то нервничать. Или вселить надежду, возможно даже опасно ложную.
Ещё есть проблема в самих данных. Не очень понятно, как сравнивать страны между собой. Китай скорее всего врёт (у них даже умершие задним числом прибавляются), в Германии и США тесты делаются всем подряд, а в каких-нибудь Камбодже или Индонезии вообще нормальной медицины в их местных джунглях нет. Я была в Камбодже, какие там самодистанцирование и официальная статистика?
Или взять процент смертности. Немцы делают огромное количество тестов, поэтому выявляют много бессимптомных случаев. А в Италии тесты вначале делали только в больницах, поэтому процент положительных тестов был выше, тяжёлых случаев больше, смертность выше. Я сейчас сижу в Турции, она на седьмом месте по общему числу случаев заражения, но почти все они в Стамбуле. Означает ли это, что в Турции сейчас опасно?
Если честно, у меня нет ответов на подобные вопросы. Я сама смотрю официальную статистику, но стараюсь ориентироваться и сравнивать внутри одной страны. Вот что было бы интересно сделать — изучить данные на предмет аномалий и попробовать понять, где и что неточно. Но тут тоже возникает вопрос — как понять, что что-то неточно, когда сравнить не с чем?
#мысли
👍1