7. Визуализация данных
Практика работы с ObservableHQ
Сергей Соловьев
Спикер курсов
Как получить max пользу от вебинара?
Формат вебинара
Темы вебинара
Визуализация данных
Этапы аналитического исследования
Формулировка проблемы, постановка цели, выбор технологий, план
1
Сбор, предобработка и хранение данных
2
Агрегация и анализ данных
3
Визуализация, формирование отчёта, публикация
4
Визуализация данных
Визуализация данных — это наглядное представление массивов различной информации.
Зачем визуализировать данные?
Оставьте свои варианты в чате или озвучьте голосом
�
70% сенсорных рецепторов находятся в глазах
на 17% выше производительность человека, работающего с визуальной информацией
Зачем визуализировать данные?
13 миллисекунд
требуется человеческому мозгу, чтобы обработать любую иллюстрацию
В случае, когда одновременно представлены текст и изображения, наш мозг всегда будет в первую очередь интерпретировать картинку
Физиологически восприятие визуальной информации является основной познавательной деятельности человека
Инфографика и визуализация данных
Есть ли существенные различия?
Оставьте свои варианты в чате или озвучьте голосом
�
Инфографика VS визуализация данных
Цель
сделать идею очевидной для читателя, показать ему вывод
сделать данные наглядными для читателя
Задачи
задачи связаны с данными:
1) показать
2) сравнить
3) организовать
4) связать
Способ создания
задачи связаны с читателем:
1) Привлечь
внимание
2) помочь понять
3) Побудить к
чему-то
создается программой
индивидуальная ручная работа для конкретного набора данных
носит общий характер
носит специфический узконаправленный характер
Характер
Физическая природа явления
Как работает зрение человека?
Глаза принимают свет и передают подробные сообщения мозгу, который истолковывает их как изображения. Каждая часть глаза играет в передаче этих изображений свою особую роль.
наружный слой: склера
средний слой: хориоидея
�
внутренний слой: сетчатка
�
хрусталик
�
остальная часть глаза
�
Зрачок приспосабливается по размеру: при тусклом свете он становится больше, а при ярком — меньше.
2
Физическая природа явления
Как работает зрение человека?
Свет попадает в глаз через роговую оболочку, которая его преломляет.
1
Свет проходит через зрачок к хрусталику, который меняет форму, чтобы сфокусировать его на сетчатку в зависимости от того, смотрите ли вы на близкий или далекий объект.
3
В сетчатке палочки и колбочки (трех видов, каждый из них содержит по одному цветовому пигменту – красному, синему и зеленому) поглощают свет и отправляют сообщения в мозг через зрительный нерв.
Мозг переводит эти сообщения в изображения.
4
Физическая природа явления
Что такое изображение?
Цифровое изображение
представляет собой прямоугольную таблицу (матрицу) цветных точек, цвет которых кодируется кортежем из нескольких чисел
Телевещание
физическая величина принимает бесконечное множество значений, причем ее значения изменяются непрерывно
Дискретное
изображение
Аналоговое изображение
Растровая графика
Векторная графика
субтрактивные (CMY, CMYK)
интуитивные (HSB, HLS, Lab)
Физическая природа явления
Способы кодирования цвета: цветовые пространства
основаны на сложении цветов
основаны на вычитании цветов
базируются на восприятии
аддитивные (RGB)
CMYK
HSB
RGB
Физическая природа явления
Способы кодирования цвета: цветовые пространства
население РФ (чел)
высота столбца (пикселей)
Шкала – функция соответствия значений атрибутов данных значениям визуальных переменных
Пример
146 748 590
146
Шкалы
F(x) = x / 10^6
Виды шкал
Равномерная шкала *значения на шкале равноудалены друг от друга
обычно масштабы равномерных шкал по осям координат принимают равными, если не представляется возможным применить равные масштабы, то их выбирают таким образом, чтобы график получился компактным, наглядным и позволял проводить достаточно точные отсчеты
Шкалы
Виды Шкал
Логарифмическая шкала *длина отрезка пропорциональна логарифму отношения величин, отмеченных на концах этого отрезка
�
Когда использовать?
�
для отображения широкого диапазона величин, когда значения, которые попадают на график, отличаются на много порядков
Шкалы
Шкалы
Виды шкал
Степенная шкала *расстояние между значениями, соответствует числам возведенным в степень
�
Когда использовать?
�
при необходимости показать на одном графике более детально какую-то группу значений, но при этом не потерять из вида значения, которые сильно отличаются от этой группы
Шкалы
Виды шкал
Дискретная шкала *
�
Когда использовать?
�
при необходимости проецировать некоторые качественные признаки объектов
Mike Bostock
специалист по визуализации данных
один из сооснователей Observable
один из ключевых разработчиков D3.js
библиотеки JavaScript, используемой для создания динамических, интерактивных интерактивных визуализаций данных
Визуальные переменные и их применение
один из аспектов графического объекта, который может визуально отличить его от других
Что из себя представляют?
Диаграмма как разновидность способа визуализации
Диаграмма - графическое представление данных линейными отрезками или геометрическими фигурами, позволяющее быстро оценить соотношение нескольких величин.
Представляет собой геометрическое символьное изображение информации с применением различных приёмов техники визуализации.
быстро и дешево
не отражают специфику предметной области
Наиболее распространенные виды диаграмм
Диаграммы-линии (графики)
Диаграммы-области
�
Столбчатые и полосовые диаграммы
Круговые диаграммы
�
Радиальные (сетчатые) диаграммы
Картодиаграммы
Биржевые диаграммы
Пространственные (трёхмерные) диаграммы
Основные инструменты визуализации
интерактивные среды
Графические
интерфейсы
Код
Основные инструменты визуализации
Код
интерактивные среды
Графические
интерфейсы
Код
Код
Код
библиотека на языке программирования Python для визуализации данных двумерной (2D) графикой (3D графика также поддерживается)
обеспечивает pyplot интерфейс, прямой и простой в использовании интерфейс, который позволяет прорисовку сложных графиков в MATLAB-подобный стиль
1
2
Код
обладает встроенными темами для оформления графики matplotlib
визуализация одномерных и двумерных данных
2
1
Код
набор инструментов для визуализации данных, состоящий из нескольких десятков небольших модулей
основана на использовании JavaScript, SVG и CSS в противовес другим подобным библиотекам, которые вместо SVG используют элемент canvas и его возможности
1
2
Код
библиотека JavaScript для интерактивных приложений
удобный конструктор карт, который визуализирует их с помощью HTML5 и CSS3
1
2
интерактивные среды
интерактивные среды
графическое представление структурированных и неструктурированных данных
редактирование и контроль результатов визуализации в интерактивном режиме
1
2
интерактивные среды
использование стандартных графиков для создания информативной графики
визуализация распределенных данных из текстовых файлов с использованием стандартного форматирования
1
2
Графические интерфейсы
И многое другое
Observable HQ
сотни собственных примеров и инструкций для помощи в учебе и эффективной разработке
реактивные коллаборативные легко распространяемые ноутбуки на JS в браузере для анализа данных
Интерактивная Визуализация данных
Шаипова Луиза, МГТУ им. Баумана
Ваши вопросы
Спрашивайте в чате или голосом
Спасибо за внимание!
�
Сергей Соловьев
Луиза Шаипова
Рассказывал и показывал
Презентацию подготовила