Визуализация данных с помощью Altair (часть 3)

Open in Colab


Подписка на онлайн-обучение telegram

Изучение наборов данных

Теперь, когда мы познакомились с основными частями API Altair (см. часть 1 и часть 2), пришло время попрактиковаться в его использовании для изучения нового набора данных.

Выберите один из следующих четырех наборов данных, подробно описанных ниже.

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

Начните с простого. Какие кодировки лучше всего работают с количественными данными? С категориальными данными? Что вы можете узнать о своем наборе данных с помощью этих инструментов?

Набор данных Погода в Сиэтле

Эти данные включают суточные осадки (daily precipitation), диапазон температур (temperature range), скорость ветра (wind speed) и тип погоды в зависимости от даты в период с 2012 по 2015 год в Сиэтле.

Набор данных Gapminder

Эти данные включают численность населения (population), рождаемости (fertility) и ожидаемой продолжительности жизни в ряде стран мира.

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

Набор данных Население США

Эти данные содержат информацию о населении США, разделенное по возрасту и полу каждое десятилетие с 1850 года до настоящего времени.

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

Набор данных Фильмы

Набор данных фильмов содержит данные о 3200 фильмах, включая дату выпуска, бюджет и рейтинги IMDB и Rotten Tomatoes.

Интерактивность и выбор

Интерактивность и грамматика выбора Altair - одна из его уникальных особенностей среди доступных графических библиотек. В этом разделе мы рассмотрим различные доступные типы выбора и начнем практиковаться в создании интерактивных диаграмм и информационных панелей (dashboards).

Доступны три основных типа выбора:

И расскажем о четырех основных вещах, которые вы можете делать с этими выборками.

Основные взаимодействия: панорамирование, масштабирование, всплывающие подсказки

Основные взаимодействия, которые предоставляет Altair, - это панорамирование (panning), масштабирование (zooming) и всплывающие подсказки (tooltips). Это можно сделать на диаграмме без использования интерфейса выбора, используя метод interactive() и кодировку tooltip.

Например, с нашим стандартным набором данных про автомобили мы можем сделать следующее:

В этот момент при наведении курсора на точку появится всплывающая подсказка с названием модели автомобиля, а нажатие/перетаскивание/прокрутка приведет к панорамированию и масштабированию графика.

Более сложное взаимодействие: выбор

Пример основного выбора: интервал

В качестве примера выбора (selection) давайте добавим интервальное выделение на график.

Начнем с классического графика рассеяния (scatter plot):

Чтобы добавить поведение выбора к диаграмме, мы создаем объект выбора и используем метод add_selection:

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

Это можно сделать с помощью alt.condition:

Функция alt.condition принимает три аргумента: объект выбора, значение, которое будет применяться к точкам внутри выделения, и значение, которое будет применено к точкам вне выделения. Здесь мы используем alt.value('lightgray'), чтобы убедиться, что цвет обрабатывается как фактический цвет, а не как имя столбца данных.

Настройка выбора интервала

Функция alt.selection_interval() принимает ряд дополнительных аргументов; например, задавая encodings, мы можем контролировать, охватывает ли выделение x, y или обе оси:

empty (пустой) аргумент позволяет нам контролировать, будут ли пустые выделения содержать все значения или ни одно из значений; с empty='none' точки по умолчанию неактивны:

Одиночный выбор

Функция alt.selection_single() позволяет пользователю кликать на отдельные объекты диаграммы, чтобы выбрать их по одному. Мы сделаем точки немного больше, чтобы их было легче нажимать:

Единичный выбор позволяет задать и другое поведение; например, мы можем установить nearest=True и on='mouseover', чтобы обновлять выделение до ближайшей точки при перемещении мыши:

Множественный выбор

Функция alt.selection_multi() очень похожа на функцию single, за исключением того, что она позволяет выбрать несколько точек одновременно, удерживая клавишу Shift:

Такие опции, как on и nearest, также работают для множественного выбора:

Привязка выделения

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

Привязка Scales

Для выбора интервала еще одна вещь, которую вы можете сделать с выделением, - это привязать область выбора к шкалам диаграммы:

По сути, это то, что делает метод chart.interactive() под капотом.

Привязка scales к другим доменам

Также можно привязать шкалы к другим доменам (domain).

Давайте добавим выбор интервала к нижнему графику, который будет контролировать домен верхнего графика:

Фильтрация по выделению

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

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

Добавим эту возможность к предыдущей диаграмме:

Сводная информация по выбору в Altair

Типы выбора:

Привязки:

Упражнение: выбор в Altair

Теперь у вас есть возможность попробовать построить графики самостоятельно! Выберите один или несколько из следующих интерактивных примеров:

  1. Используя данные об автомобилях, создайте диаграмму рассеяния (scatter-plot), на которой размер (size) точек становится больше при наведении на них курсора.

  2. Используя данные об автомобилях, создайте двухпанельную (two-panel) гистограмму (скажем, количество миль на галлон на одной панели, количество лошадиных сил на другой), где вы можете перетащить мышь, чтобы выбрать данные на левой панели, чтобы отфильтровать данные на второй панели.

  3. Измените приведенный выше пример диаграммы разброса и гистограммы, чтобы

  1. Попробуй что-нибудь новое!

Преобразования

Важным элементом конвейера визуализации является преобразование данных (data transformation).

С Altair у вас есть два возможных пути преобразования данных, а именно:

  1. предварительное преобразование в Python
  2. трансформация в Altair/Vega-Lite

Вычисление преобразования

В качестве примера рассмотрим преобразование входных данных о населении. В наборе данных перечислены агрегированные данные переписи США по годам, полу и возрасту, но пол указан как 1 и 2, что делает надписи на диаграммах мало понятными:

Один из способов решить эту проблему с помощью Python - использовать инструменты Pandas для переназначения имен столбцов, например:

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

Это можно сделать с помощью метода transform_calculate, принимающего Vega-выражение, которое по сути представляет собой строку, которая может содержать небольшое подмножество операций JavaScript:

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

Если вы предпочитаете создавать эти выражения на Python, то Altair предоставляет для этого облегченный API:

Преобразование фильтра

Преобразование фильтра аналогично. Например, предположим, что вы хотите создать диаграмму, состоящую только из мужского населения из записей переписи. Как и выше, это можно сделать в Pandas, но полезно, чтобы эта операция была доступна и в спецификации диаграммы. Это можно сделать с помощью метода transform_filter():

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

Другие преобразования

Доступны и другие методы преобразования, и хотя мы не будем их здесь демонстрировать, примеры можно найти в документации Altair Transform.

Altair предоставляет ряд полезных преобразований. Некоторые будут вам знакомы:

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

Также существует множество других преобразований, таких как:

Посетите документацию по Transform для получения более полного списка.

Упражнение

Возьмем следующие данные:

  1. Создайте диаграмму на основе этих данных и постройте кривые синуса и косинуса с помощью transform_calculate.

  2. Используйте transform_filter на этой диаграмме и удалите области графика, где значение кривой косинуса меньше значения кривой синуса.

Конфигурация диаграммы

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

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

  1. Конфигурация диаграммы верхнего уровня. На верхнем уровне диаграммы Altair вы можете указать параметры конфигурации, которые будут применяться к каждой панели или слою на диаграмме.

  2. Параметры локальной конфигурации. Параметры верхнего уровня можно переопределить локально, указав локальную конфигурацию.

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

Посмотрим на пример.

Пример 1: Управление свойствами маркера

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

Конфигурация верхнего уровня

На верхнем уровне у Altair есть метод configure_mark(), который позволяет настраивать большое количество параметров конфигурации для меток в целом, а также свойство configure_point(), которое специально настраивает свойства точек.

Вы можете увидеть доступные параметры в строке документации Jupyter, доступ к которой осуществляется через вопросительный знак:

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

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

alt.Chart.configure_     # затем нажмите клавишу TAB, чтобы увидеть доступные конфигурации

Конфигурация локальной метки

В методе mark_point() вы можете передавать локальные конфигурации, которые переопределяют параметры конфигурации верхнего уровня. Аргументы такие же, как у configure_mark.

Обратите внимание, что конфигурации color и fill переопределяются локальными конфигурациями, но size остается таким же, как и раньше.

Конфигурация кодирования

Наконец, самый высокий приоритет - это параметр encoding. Здесь давайте установим цвет Steelblue в кодировке:

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

Пример 2: заголовки диаграммы и осей

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

Мы можем явно установить заголовки осей, используя аргумент title для кодировки:

Точно так же мы можем установить свойство title диаграммы в свойствах диаграммы:

Пример 3: Свойства оси

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

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

Пример 4: Масштабировать свойства и пределы оси

Каждая кодировка также имеет scale (масштаб), который позволяет настраивать такие параметры, как пределы оси и другие свойства масштаба.

Обратите внимание, что если вы уменьшите масштаб до меньшего размера, чем диапазон данных, данные по умолчанию будут выходить за пределы шкалы:

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

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

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

Пример 5: Цветовые шкалы

Иногда полезно вручную настроить используемую цветовую шкалу.

Вы можете изменить цветовую схему с помощью свойства цветовой шкалы из цветовых схем Vega:

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

Упражнение: корректировка графиков

Потратьте около 10 минут и попрактикуйтесь в корректировке эстетики ваших графиков.

Используйте любимую визуализацию из предыдущего упражнения и настройте эстетику графика:

Используйте завершение табуляции в alt.Chart.configure_, чтобы увидеть различные параметры конфигурации, затем используйте ?, чтобы увидеть документацию по функциям.

Географические графики

В Altair 2.0 добавлена возможность построения географических данных.

Эта функциональность все еще немного сырая (например, не все взаимодействия или выборки работают должным образом с проецируемыми данными), но ее относительно просто использовать.

Мы покажем здесь несколько примеров.

Диаграммы рассеяния в географических координатах

Сначала мы покажем пример построения данных широты/долготы с использованием картографической проекции. Мы загрузим набор данных, состоящий из широты/долготы каждого аэропорта США:

График очень похож на стандартный график рассеяния с некоторыми отличиями:

Для данных, охватывающих только США, полезна проекция albersUsa (Альберса):

Проекция Альберса — картографическая проекция, разработанная в 1805 году немецким картографом Хейнрихом Альберсом. Используется для изображения регионов, вытянутых в широтном направлении. Проекция коническая, сохраняющая площадь объектов, но искажающая углы и форму контуров (из Вики).

Доступные проекции перечислены в документации Vega.

Карты хороплетов (фоновая картограмма)

Если вы хотите нанести географические границы, такие как штаты и страны, то должны загрузить данные географической формы для отображения в Altair. Для этого требуется немного шаблонов (boilerplate) (мы думаем о том, как оптимизировать эту типичную конструкцию в будущих выпусках) и использовать маркер geoshape.

Например, вот государственные границы:

А вот и границы стран:

Вы можете посмотреть, что произойдет, если попробуете другие типы проекций, например, можете попробовать mercator, orthographic, albers или gnomonic.

Точки на фоне

Если вы хотите нанести точки данных на фон карты, самый простой способ сделать это - использовать операторы наслоения (layering operators):

Обратите внимание, что нам нужно указать проекцию и размер диаграммы только один раз.

Цветные хороплеты

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

Опять же, это часть API, которую мы надеемся улучшить в будущем.

В качестве примера, вот диаграмма, представляющая общее население каждого штата:

Обратите внимание на ключевой момент: данные хороплет имеют столбец id, который соответствует столбцу id в данных о населении. Мы используем его как ключ поиска, чтобы объединить два набора данных вместе и построить их соответствующим образом.

Чтобы увидеть больше примеров географических визуализаций, см. галерею Altair и имейте в виду, что это область Altair и Vega-Lite, которая постоянно улучшается!

Успехов!

Подписка на онлайн-обучение telegram