Добавляем графики и визуализацию — Streamlit: создание интерактивных dashboards на Python

Данные в видео:

product,price,category,month
Laptop,1200,Electronics,January
Phone,800,Electronics,January
Chair,150,Furniture,February
Table,300,Furniture,March
Camera,600,Electronics,March
TV,1400,Electronics,April
Sofa,900,Furniture,April

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

Представьте ситуацию: у вас есть данные по продажам за несколько месяцев. Формально вся информация уже находится в DataFrame, но заметить тренд, рост или падение показателей через обычную таблицу довольно сложно. Глаза начинают цепляться за отдельные числа, а не за общую динамику. Именно поэтому практически любой dashboard строится вокруг визуализации.

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

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

Что вы узнаете в рамках статьи

В этом уроке мы познакомимся с визуализацией данных в Streamlit и научимся строить разные типы графиков.

Сегодня мы научимся:

строить линейные графики;
создавать bar chart;
работать с histogram;
подключать Plotly;
подготавливать данные через Pandas;
и превращать обычный dashboard в полноценную аналитическую панель.

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

Ключевые термины

Визуализация данных — графическое представление информации.
Chart — график или диаграмма.
Line Chart — линейный график для отображения изменений во времени.
Bar Chart — столбчатая диаграмма для сравнения категорий.
Pie Chart — круговая диаграмма для отображения долей.
Histogram — график распределения значений.
Plotly — библиотека для создания интерактивных графиков.
Агрегация — объединение и вычисление данных, например суммы или среднего значения.

Почему dashboards почти всегда строятся вокруг графиков

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

Подготовка данных

Для начала немного обновим CSV-файл.

product,price,category,month
Laptop,1200,Electronics,January
Phone,800,Electronics,January
Chair,150,Furniture,February
Table,300,Furniture,March
Camera,600,Electronics,March
TV,1400,Electronics,April
Sofa,900,Furniture,April

Этого достаточно для построения первых графиков.

Быстрые графики Streamlit

Streamlit умеет строить некоторые графики буквально одной строкой кода.

Например:

st.line_chart(df["price"])

После запуска приложения появится линейный график. И здесь хорошо видно философию Streamlit: минимум кода — максимум результата.

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

Столбчатые диаграммы

Теперь построим bar chart.

st.bar_chart(df["price"])

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

Например, можно посчитать суммарные продажи по категориям.

category_sales = df.groupby("category")["price"].sum()

Теперь Electronics и Furniture будут иметь суммарные значения продаж. И вот такие данные уже намного лучше подходят для визуализации.

Строим bar chart по агрегации

st.bar_chart(category_sales)

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

Histogram — распределение значений

Иногда важно не просто сравнить категории, а понять распределение данных. Например, много ли в таблице дешёвых товаров, встречаются ли выбросы и какие значения появляются чаще всего. Для таких задач используют histogram.

Сначала установим Matplotlib:

pip install matplotlib

Теперь импортируем библиотеку:

import matplotlib.pyplot as plt

И построим histogram:

fig, ax = plt.subplots()
ax.hist(df["price"])
st.pyplot(fig)

Здесь hist() строит histogram по столбцу price, а st.pyplot() отображает график внутри Streamlit-приложения.

Pie Chart — доли категорий

Теперь построим круговую диаграмму.

Сначала снова подготовим агрегированные данные:

category_sales = df.groupby("category")["price"].sum().reset_index()

А затем создадим pie chart:

fig, ax = plt.subplots()

ax.pie(
    category_sales["price"],
    labels=category_sales["category"],
    autopct='%1.1f%%'
)

st.pyplot(fig)

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

Связываем графики с фильтрами

Самое интересное начинается тогда, когда filters и графики начинают работать вместе.

Например:

category = st.sidebar.selectbox(
    "Категория",
    df["category"].unique()
)

filtered_df = df[df["category"] == category]

Теперь построим график:

st.bar_chart(filtered_df["price"])

После выбора категории график автоматически изменится.

И именно это создаёт ощущение “живого” dashboard.

Создаём первую аналитическую панель

Теперь объединим всё вместе.

import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt

df = pd.read_csv("sales.csv")

st.title("Dashboard продаж")

category = st.sidebar.selectbox(
    "Категория",
    df["category"].unique()
)

filtered_df = df[df["category"] == category]

st.dataframe(filtered_df)

sales_by_month = (
    filtered_df.groupby("month")["price"]
    .sum()
)

fig, ax = plt.subplots()

ax.plot(
    sales_by_month.index,
    sales_by_month.values
)

st.pyplot(fig)

fig, ax = plt.subplots()

ax.pie(
    filtered_df["price"],
    labels=filtered_df["product"],
    autopct='%1.1f%%'
)

st.pyplot(fig)

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

Наиболее частые ошибки

График отображается странно
Обычно проблема в том, что данные не агрегированы перед построением визуализации. На практике перед графиками часто используют groupby, sum, mean или count.
Matplotlib не установлен
Streamlit не сможет построить график, если библиотека отсутствует в окружении проекта. Не забудьте установить matplotlib через pip.
Pie chart выглядит перегруженным
Круговые диаграммы плохо подходят для большого количества категорий и быстро становятся нечитаемыми.
Линейный график показывает неправильный порядок месяцев
Обычно это связано с тем, что строки сортируются как обычный текст, а не как даты.

Наиболее частые вопросы

Когда использовать встроенные графики Streamlit, а когда Matplotlib?
Встроенные графики Streamlit хорошо подходят для быстрых и простых visualizations, а Matplotlib обычно используют, когда нужна более гибкая настройка графиков.
Нужно ли знать Matplotlib для Streamlit?
Не обязательно, но знание Matplotlib сильно расширяет возможности при создании dashboards и визуализаций.
Почему графики автоматически обновляются?
Streamlit полностью перезапускает приложение после изменения widgets или filters, поэтому интерфейс обновляется автоматически.
Можно ли размещать несколько графиков рядом?
Да, позже мы будем использовать columns, контейнеры и tabs для создания более сложных layouts.

Итоги

Сегодня наш dashboard сделал ещё один большой шаг вперёд. Мы познакомились с визуализацией данных, научились строить линейные графики, bar chart, pie chart и histogram. Кроме того, мы увидели, насколько важны агрегации при работе с аналитическими панелями и как Pandas помогает подготавливать данные для графиков.

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

На следующем уроке мы сделаем приложение ещё более профессиональным: добавим многостраничность, разберём организацию большого Streamlit-проекта и научимся хранить состояние между страницами.