Создание интерактивных диаграмм распределений с использованием библиотеки Plotly

Министерство науки и высшего образования Российской Федерации 
Казанский национальный исследовательский 
технологический университет 
А. Н. Титов, Р. Ф. Тазиева 
СОЗДАНИЕ ИНТЕРАКТИВНЫХ
ДИАГРАММ РАСПРЕДЕЛЕНИЙ
С ИСПОЛЬЗОВАНИЕМ 
БИБЛИОТЕКИ PLOTLY 
Учебно-методическое пособие 
Казань 
Издательство КНИТУ 
2023 

УДК 004.42(075) 
ББК 32.97я7 
Т45 
Печатается по решению редакционно-издательского совета  
Казанского национального исследовательского технологического университета 
Рецензенты: 
д-р пед. наук, доц. Ю. В. Торкунова 
канд. экон. наук, доц. О. С. Семичева 
Т45 
Титов А. Н. 
Создание интерактивных диаграмм распределений с использованием 
библиотеки Plotly : учебно-методическое пособие / А. Н. Титов, 
Р. Ф. Тазиева; Минобрнауки России, Казан. нац. исслед. технол. 
ун-т. – Казань : Изд-во КНИТУ, 2023. – 96 с. 
ISBN 978-5-7882-3386-4 
Рассмотрены возможности языка программирования Python в области интерактивной визуализации данных. Для визуального анализа данных использован 
модуль plotly.express библиотеки Plotly. Приведены примеры построения диаграмм распределений: histogram, bar, kde, violin, ecdf, strip, density_heatmap 
и dencity_contour. Для оценки уровня усвоения студентами пройденного материала предложены варианты заданий для самостоятельной работы. 
Предназначено для бакалавров направлений подготовки 09.03.02 «Информационные системы и технологии», 22.03.01 «Материаловедение и технологии материалов», 28.03.02 «Наноинженерия», 18.03.01 «Химическая технология», 
29.03.04 «Технология художественной обработки материалов», 29.03.05 «Конструирование изделий легкой промышленности», изучающих дисциплины «Информатика», «Информационные технологии», «Вычислительная математика», 
«Программирование», «Компьютерная графика», «Теория вероятностей и математическая статистика». 
Подготовлено на кафедре информатики и прикладной математики. 
УДК 004.42(075) 
ББК 32.97я7 
ISBN 978-5-7882-3386-4 
© Титов А. Н., Тазиева Р. Ф., 2023 
© Казанский национальный исследовательский 
технологический университет, 2023 
2

О Г Л А В Л Е Н И Е
Введение ............................................................................................................ 4 
1. ПОСТРОЕНИЕ ГРАФИКОВ В БИБЛИОТЕКЕ PLOTLY 
........................ 6 
2. МЕТОД HISTOGRAM 
................................................................................ 14 
3. ПОСТРОЕНИЕ KDE-ГРАФИКОВ В PLOTLY ....................................... 36 
4. МЕТОД BOX() ............................................................................................ 47 
5. МЕТОД VIOLIN() ....................................................................................... 56 
6. МЕТОД ECDF() 
........................................................................................... 63 
7. МЕТОД STRIP() .......................................................................................... 72 
8. МЕТОД DENSITY_HEATMAP() .............................................................. 75 
9. МЕТОД DENSITY_CONTOUR() .............................................................. 81 
Задания для самостоятельной работы........................................................... 90 
Литература ....................................................................................................... 93 
Для заметок 
...................................................................................................... 94 
3 

В В Е Д Е Н И Е
Интерактивная библиотека Plotly предназначена для создания, 
обработки и визуализации графических объектов (диаграмм, графиков, 
карт). Библиотека поддерживает работу с объектами Pandas, что позволяет выполнять сложные преобразования данных. C ее помощью можно 
строить диаграммы для визуализации статистических, научных, финансовых данных; трехмерные графики, геологические карты, информационные панели, API, анимации и т. д. 
Plotly – это веб-приложение для визуализации данных, основанное на JavaScript-библиотеке Plotly (plotly.py/plotly.js). Его используют 
для создания веб-визуализаций данных, которые можно хранить в виде 
отдельных HTML-файлов либо отображать в ноутбуках Jupyter или вебприложениях с помощью Dash.  
Библиотека содержит несколько модулей. В данном пособии авторы постарались подробно описать атрибуты методов построения диаграмм распределений, используемых в модуле plotly.express, и надеются облегчить восприятие изложенного материала большим количеством примеров и пояснений к ним. 
Пособие включает в себя девять глав. В первой главе рассмотрена работа в модулях библиотеки plotly.graph_objs и plotly.express, 
приведен пример настройки внешнего вида диаграммы и ее отдельных 
элементов. Рассмотрены вопросы построения графиков в отдельных 
подокнах графического окна. Во второй главе показано, как в модуле 
plotly.express можно осуществить визуализацию данных с помощью 
метода histogram(), а также показано, как можно добавить на график 
кривую плотности распределения. В третьей главе приведены примеры построения аппроксимирующих кривых плотности распределений с использованием различных ядер, рассмотрена визуализация данных с помощью метода create_distplot() модуля plotly.figure_factory. 
В четвертой главе рассмотрены параметры метода box() и приведен 
пример обновления текстовых надписей методом update_layout(). 
В пятой главе показано, как с помощью метода violin() модуля 
plotly.express строятся скрипичные диаграммы. Приведен пример разделения kde-графика на две части в модуле plotly.graph_objects. Шестая глава посвящена вопросам построения графиков эмпирической 
кумулятивной функции распределения. Проведено сравнение результатов, полученных с помощью функции ecdf(), с результатами, 
4 

полученными с использованием параболического ядра. В седьмой 
главе показано, как строятся strip-диаграммы. В восьмой главе рассмотрены вопросы визуализации двумерной таблицы с числовыми данными с помощью тепловой карты. В девятой главе строятся контурные 
графики плотности двумерного распределения. На большом количестве 
примеров продемонстрировано назначение параметров каждого рассмотренного метода. 
Материал, изложенный в пособии, может быть использован при 
проведении лабораторных занятий по информационным технологиям, 
обработке экспериментальных данных, вычислительной и прикладной 
математике, теории вероятностей и математической статистике. Используемая в пособии версия – Plotly 5.14.0. 
Вся работа по построению приведенных в пособии графиков 
была проведена в Jupyter Notebook и Google Colab. 
5 

.  П О С Т Р О Е Н И Е  Г Р А Ф И К О В  В  Б И Б Л И О Т Е К Е
P L O T L Y  
Библиотека Plotly не встроена в Python. Для ее установки используется менеджер пакетов pip: нужно набрать pip install plotly в командной строке или !pip install plotly в Jupyter Notebook (% pip install  plotly). 
После установки пакета необходимо его импортировать и выбрать (импортировать) для работы тот модуль, в котором вы собираетесь строить график. Библиотека Plotly содержит несколько модулей. 
Кратко опишем некоторые из них. 
Модуль plotly.graph_objects предоставляет автоматически сгенерированную иерархию классов, называемых графическими объектами, 
которые можно использовать для создания рисунков с классом верхнего уровня plotly.graph_objects.Figure. Сам график при этом получается путем компоновки базовых графических объектов по принципу 
«снизу вверх».  
Для визуализации графических объектов (диаграмм, карт, рисунков и т. д.) предназначена библиотека Plotly.js языка JavaScript. Данные 
о графических объектах хранятся в формате JSON (JavaScript Object 
Notation), который по структуре мало чем отличается от словаря (dict) 
в 
Python. 
Доступ 
к 
ним 
возможен 
через 
вызов 
класса plotly.graph_objects.Figure.  
Для того чтобы вывести сведения о графическом объекте в формате JSON, нужно использовать метод print(fig), а для его визуализации – fig.show. Покажем, как можно построить простейший график 
в модуле plotly.graph_objs: 
import  plotly.graph_objs  as  go 
from numpy import * 
g=go.Figure() 
x=linspace(-3,3,100) 
def f(x): 
    return 1/(2*pi)**0.5*exp(-x**2/2) 
fig=g.add_trace(go.Scatter(x=x,y=f(x))) 
fig.show() 
print(fig) 
6 

Выполнив код, получим график (рис. 1.1), объект Figure, содержащий информацию о типе графика, его макете (layout), и два массива 
со 100 значениями х и y: 
 
1
Рис. 1.1. График функции 𝑦=
2   
√2𝜋𝑒−𝑥2
Figure({ 
    'data': [{'type': 'scatter', 
              'x': array([… 
]), 
              'y': array([… 
])}], 
    'layout': {'template': '...'} 
}) 
График получился интерактивным: при наведении курсора на 
данные можно получить некоторую информацию (в данном случае – 
координаты точки графика) и производить над графиком определенные 
действия с помощью появившейся в правом верхнем углу рисунка панели режимов. Она содержит разные пиктограммы для разных типов 
графиков.  
В Plotly есть три корневых атрибута: data, layout и frames. 
Значением первого корневого атрибута является список словарей. Эти словари называются traces (трейсы). Каждый trace в модуле 
plotly.graph_objs имеет один из 40 типов (type) диаграмм. В примере 
данным типом выступал scatter (диаграмма рассеяния). Диаграмма может иметь одну легенду, за исключением круговой диаграммы (pie) 
и воронкообразного графика (funnel chart). 
Второй корневой атрибут layout является словарем. Данный атрибут отвечает за расположение и настройки частей рисунка, не 
7 

связанных с данными, таких как размеры и координаты рисунка, шаблоны, шрифты, цвета, метки при наведении, заголовок и легенда, аннотации т. д. С помощью этого атрибута можно создавать элементы 
управления, которые могут запускать функции Plotly.js при взаимодействии с пользователем: меню обновлений (updatemenus) –  кнопки, выпадающие списки, переключатели, слайдеры (sliders). 
Третьим корневым атрибутом является frames. Значения данного 
атрибута хранятся в списке словарей. Эти словари соответствуют кадрам в анимированном графике. Каждый кадр содержит свой собственный атрибут данных, а также другие параметры. Анимация обычно запускается и управляется с помощью элементов управления, определенных в layout.sliders и/или layout.updatemenus. 
Новые графики могут быть добавлены к уже созданным 
в plotly.graph_objects с помощью метода add_trace(). Метод принимает 
данные графического объекта (экземпляр go.Scatter, go.Bar и т. д.) и добавляет построенный на их основе график к имеющимся. Это позволяет 
сначала создать пустое графическое окно и последовательно добавлять 
в 
него 
графики. Это 
же 
можно 
сделать 
с 
помощью 
метода append_trace().  
Следующий модуль, в котором можно создавать рисунки, – модуль plotly.express. Он использует graph_objects и возвращает 
graph_objects. Можно сказать, что plotly.express по отношению к Plotly 
является тем же, чем Seaborn по отношению к Matplotlib.  
Построим приведенный график (см. рис. 1.1) в модуле plotly.express: 
import  plotly.express  as  px  
from numpy import * 
x=linspace(-3,3,100) 
def f(x): 
    return 1/(2*pi)**0.5*exp(-x**2/2) 
fig=px.line(x=x,y=f(x)) 
fig.show() 
В коде поменяли тип кривой со scatter на line. В противном случае получился бы график из отдельных точек, не соединенных отрезками прямых. 
Функции пакета plotly.figure_factory – это функции, предназначенные для создания графических объектов, удовлетворяющих потребности 
некоторых 
специализированных 
предметных 
областей. 
8 

Например, в пакете можно построить дендрограмму – визуализатор, используемый для представления результатов иерархической кластеризации. Она показывает степень близости отдельных объектов и кластеров, 
а также наглядно демонстрирует в графическом виде последовательность их объединения или разделения: 
from plotly.figure_factory import create_dendrogram 
import numpy as np 
import pandas as pd 
Index= ['A','B','C','D','E','F','G','H','I','J'] 
df = pd.DataFrame(abs(np.random.randn(10, 10)), index=Index) 
fig = create_dendrogram(df, labels=Index) 
fig.show() 
Результат работы кода представлен на рис. 1.2. 
 
Рис. 1.2. Дендрограмма, построенная в plotly.figure_factory 
С помощью функции plotly.subplots.make_subplots() можно создать графический объект, состоящий из нескольких подокон в одном 
графическом окне, на каждый из которых можно нанести необходимые 
графические объекты (линии, диаграммы, карты и т. д.).  
Таким образом можно построить графики двух функций, например гамма-распределения с параметрами k = 8, λ = 2 и распределения 
хи-квадрат с 4 степенями свободы, в разных подокнах одного графического окна:  
from plotly.subplots import make_subplots 
import numpy as np 
9 

from scipy.stats import chi2,gamma 
x=np.linspace(.1,10,50) 
fig = make_subplots(rows=1, cols=2, 
   subplot_titles=('Плотность гамма-распределения k=8, λ=2', 
                   '$$ Плотность ~ распределения ~ χ^2$$')) 
fig.add_scatter(row=1, col=1,  
                x=x,y=gamma.pdf(x,8,0,1/2), 
                mode='markers+lines',name=' γ(8,2)' ) 
fig.add_scatter(row=1, col=2,  
                x=x,y=chi2.pdf(x,4),name='$$ y=χ^2(4)$$') 
fig.show() 
 
Рис. 1.3. Два подграфика в одном графическом окне 
Вне зависимости от того, в каком из модулей построен график, 
его можно обновлять, добавляя к нему при необходимости дополнительные графики и изменяя свойства графика. Если график был создан 
с использованием plotly.subplots.make_subplots(), то можно указать номер строки и столбца, чтобы вывести график в определенное подокно.  
Метод update_layout() можно использовать для обновления нескольких свойств макета рисунка, например текста и размера шрифта 
заголовка. Графические объекты поддерживают метод update_traces(), 
который можно использовать для обновления нескольких свойств одной или нескольких диаграмм. 
Метод update_traces() поддерживает  аргумент selector, позволяющий указать, какие объекты следует обновлять. Будут обновлены 
только диаграммы со свойствами, соответствующими селектору. 
10