History

leestott e2b90108bb 🌐 Update translations via Co-op Translator		3 weeks ago
..
README.md	🌐 Update translations via Co-op Translator	3 weeks ago

README.md

Unescape Escape

Создание значимых визуализаций


Значимые визуализации - Скетчноут от @nitya

"Если достаточно долго пытать данные, они признаются во всем" -- Рональд Коуз

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

В этом уроке вы изучите:

Как выбрать правильный тип диаграммы
Как избежать обманчивых визуализаций
Как работать с цветом
Как стилизовать диаграммы для улучшения читаемости
Как создавать анимационные или 3D-диаграммы
Как разрабатывать креативные визуализации

Тест перед лекцией

Выбор правильного типа диаграммы

В предыдущих уроках вы экспериментировали с созданием различных интересных визуализаций данных, используя Matplotlib и Seaborn. В общем случае, вы можете выбрать подходящий тип диаграммы для вашего вопроса, используя следующую таблицу:

Вам нужно:	Используйте:
Показать тренды данных во времени	Линейная диаграмма
Сравнить категории	Столбчатая, круговая диаграмма
Сравнить общие значения	Круговая, составная столбчатая
Показать взаимосвязи	Точечная, линейная, фасетная, двойная линия
Показать распределения	Точечная, гистограмма, ящичная диаграмма
Показать пропорции	Круговая, пончиковая, вафельная диаграмма

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

Избегайте обмана

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

🎥 Нажмите на изображение выше, чтобы посмотреть доклад о вводящих в заблуждение диаграммах

Эта диаграмма переворачивает ось X, чтобы показать противоположное истине, основываясь на дате:

Эта диаграмма еще более обманчива, так как взгляд автоматически устремляется вправо, чтобы сделать вывод, что со временем случаи COVID сократились в различных округах. Однако, если внимательно посмотреть на даты, можно заметить, что они были переставлены, чтобы создать ложное впечатление нисходящего тренда.

Этот печально известный пример использует цвет И перевернутую ось Y, чтобы ввести в заблуждение: вместо вывода о том, что количество смертей от огнестрельного оружия возросло после принятия закона, благоприятного для оружия, взгляд обманчиво воспринимает противоположное:

Эта странная диаграмма показывает, как можно манипулировать пропорциями, вызывая комический эффект:

Сравнение несравнимого — еще один сомнительный прием. Существует замечательный веб-сайт, посвященный "ложным корреляциям", где представлены "факты", связывающие, например, уровень разводов в штате Мэн и потребление маргарина. На Reddit также есть группа, собирающая некрасивые примеры использования данных.

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

Цвет

Вы видели на примере диаграммы о "насилии с применением оружия во Флориде", как цвет может добавить дополнительный слой смысла к диаграммам, особенно если они не созданы с использованием библиотек, таких как ggplot2 и RColorBrewer, которые предлагают проверенные цветовые палитры. Если вы создаете диаграмму вручную, изучите немного теорию цвета.

✅ Помните, что при разработке диаграмм доступность является важным аспектом визуализации. Некоторые ваши пользователи могут быть дальтониками — отображается ли ваша диаграмма корректно для пользователей с нарушениями зрения?

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

Хотя значение цветов может различаться в разных частях мира и меняться в зависимости от оттенка, в общем случае цвета ассоциируются со следующими значениями:

Цвет	Значение
красный	сила
синий	доверие, лояльность
желтый	счастье, осторожность
зеленый	экология, удача, зависть
фиолетовый	счастье
оранжевый	энергия

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

Стилизация диаграмм для читаемости

Диаграммы не будут значимыми, если они нечитаемы! Уделите время настройке ширины и высоты диаграммы, чтобы она хорошо масштабировалась с вашими данными. Если необходимо отобразить, например, все 50 штатов, расположите их вертикально на оси Y, чтобы избежать горизонтальной прокрутки.

Подписывайте оси, добавляйте легенду при необходимости и предлагайте всплывающие подсказки для лучшего понимания данных.

Если ваши данные текстовые и содержат длинные подписи на оси X, вы можете наклонить текст для улучшения читаемости. plot3D предлагает 3D-графики, если ваши данные это поддерживают. С его помощью можно создавать сложные визуализации данных.

Анимация и 3D-отображение диаграмм

Некоторые из лучших визуализаций данных сегодня являются анимационными. Ширли Ву создала потрясающие примеры с использованием D3, такие как 'цветы фильмов', где каждый цветок представляет собой визуализацию фильма. Другой пример для Guardian — 'Bussed Out', интерактивный проект, сочетающий визуализации с Greensock и D3, а также формат статьи с прокруткой, чтобы показать, как Нью-Йорк решает проблему бездомных, отправляя их за пределы города.

"Bussed Out: Как Америка перемещает своих бездомных" от The Guardian. Визуализации Надии Бремер и Ширли Ву

Хотя этот урок недостаточен для глубокого изучения этих мощных библиотек визуализации, попробуйте свои силы в D3 в приложении на Vue.js, используя библиотеку для отображения визуализации книги "Опасные связи" в виде анимированной социальной сети.

"Опасные связи" — это эпистолярный роман, представленный в виде серии писем. Написанный в 1782 году Шодерло де Лакло, он рассказывает историю коварных и аморальных социальных маневров двух главных героев французской аристократии конца XVIII века — виконта де Вальмона и маркизы де Мертей. Оба в итоге погибают, но не без нанесения значительного социального ущерба. Роман разворачивается как серия писем, написанных различным людям из их окружения, с целью мести или создания проблем. Создайте визуализацию этих писем, чтобы выявить ключевых персонажей повествования визуально.

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

Проект: Создание диаграммы для отображения сети с использованием D3.js

В папке этого урока есть папка solution, где вы найдете завершенный проект для справки.

Следуйте инструкциям в файле README.md в корневой папке стартового проекта. Убедитесь, что у вас установлены NPM и Node.js перед установкой зависимостей проекта.
Откройте папку starter/src. Вы найдете папку assets, где находится файл .json со всеми письмами из романа, пронумерованными, с указанием "кому" и "от кого".
Завершите код в components/Nodes.vue, чтобы включить визуализацию. Найдите метод createLinks() и добавьте следующий вложенный цикл.

Пройдитесь по объекту .json, чтобы собрать данные "кому" и "от кого" для писем и создать объект links, который сможет использовать библиотека визуализации:

//loop through letters
      let f = 0;
      let t = 0;
      for (var i = 0; i < letters.length; i++) {
          for (var j = 0; j < characters.length; j++) {
              
            if (characters[j] == letters[i].from) {
              f = j;
            }
            if (characters[j] == letters[i].to) {
              t = j;
            }
        }
        this.links.push({ sid: f, tid: t });
      }

Запустите приложение из терминала (npm run serve) и наслаждайтесь визуализацией!

🚀 Задание

Изучите интернет в поисках обманчивых визуализаций. Как автор вводит пользователя в заблуждение, и было ли это сделано намеренно? Попробуйте исправить визуализации, чтобы показать, как они должны выглядеть.

Тест после лекции

Обзор и самостоятельное изучение

Вот несколько статей о вводящих в заблуждение визуализациях данных:

https://gizmodo.com/how-to-lie-with-data-visualization-1563576606

http://ixd.prattsi.org/2017/12/visual-lies-usability-in-deceptive-data-visualizations/

Ознакомьтесь с этими интересными визуализациями исторических артефактов:

https://handbook.pubpub.org/

Прочтите эту статью о том, как анимация может улучшить ваши визуализации:

https://medium.com/@EvanSinar/use-animation-to-supercharge-data-visualization-cd905a882ad4

Задание

Создайте свою собственную визуализацию

Отказ от ответственности:
Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Хотя мы стремимся к точности, пожалуйста, имейте в виду, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его исходном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.

README.md Unescape Escape