Создание вставного графика

Страница в процессе перевода.

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

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

Итак, рассмотрим процесс создания такого графика.

1. Загрузка пакетов

Начнем с загрузки пакета бэкенда CairoMakie и пакета Random.

using CairoMakie
using Random

2. Подготовка данных основного графика

Затем сгенерируем данные, необходимые для основного графика (данные о ценах на акции за 500-дневный период).

Random.seed!(123)
time = 1:500
stock_price = cumsum(randn(500) .+ 0.5)

3. Создание основного графика

С помощью Figure() и Axis() для настроим область основного графика и отобразим данных о ценах на акции.

fig = Figure(size = (800, 600))

ax_main = Axis(fig[1, 1],
    title="Stock Price Over Time",
    xlabel="Days",
    ylabel="Price")

line_main = lines!(ax_main, time, stock_price, color=:blue)
fig

4. Добавление вставной оси

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

ax_inset = Axis(fig[1, 1],
    width=Relative(0.2),
    height=Relative(0.2),
    halign=0.1,
    valign=0.9,
    title="Zoomed View")

Настроим размер оси с помощью атрибутов width и height. Настроим положение оси с помощью атрибутов halign и valign.

5. Размещение данных на вставном графике

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

xlims!(ax_inset, 50, 70)
min_price, max_price = extrema(stock_price[50:70])
ylims!(ax_inset, min_price, max_price)
line_inset = lines!(ax_inset, time, stock_price, color=:red)
fig

6. Управление порядком расположения осей на графике

Важно убедиться в том, что вставной график отображается над основным. Для этого в функции translate! нужно задать положительное значение z.

translate!(ax_inset.blockscene, 0, 0, 150)

7. Добавление условных обозначений

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

Legend(fig[1, 2], [line_main, line_inset], ["Stock Price", "Zoomed Region"])

Условные обозначения будут добавлены справа от рисунка, синяя линия будут связана с основным графиком, а красная — со вставным графиком.

8. Пометка увеличенной выбранной области

Укажем увеличенную часть основного графика, построив границу вокруг выбранной области.

border_rect = Rect2(50, min_price, 20, max_price - min_price)
lines!(ax_main, border_rect, color=:black, linewidth=1)
fig

Полный пример кода

Далее приведен полный фрагмент кода.

# Загрузим пакеты
using CairoMakie
using Random

# Сгенерируем фиктивные данные о ценах на акции
Random.seed!(123)
time = 1:500
stock_price = cumsum(randn(500) .+ 0.5)

# Создадим рисунок
fig = Figure(size=(800, 600))

# Основной график
ax_main = Axis(fig[1, 1],
    title="Stock Price Over Time",
    xlabel="Days",
    ylabel="Price")

line_main = lines!(ax_main, time, stock_price, color=:blue)

# Вставная ось
ax_inset = Axis(fig[1, 1],
    width=Relative(0.2),
    height=Relative(0.2),
    halign=0.1,
    valign=0.9,
    title="Zoomed View")

# Зададим xlims для выбранного диапазона временных данных
xlims!(ax_inset, 50, 70)

# Динамически вычислим и зададим значения ylims для выбранного диапазона временных данных
min_price, max_price = extrema(stock_price[50:70])
ylims!(ax_inset, min_price, max_price)

# Построим график данных на вставной оси
line_inset = lines!(ax_inset, time, stock_price, color=:red)

# Z-упорядочение для порядка отрисовки
translate!(ax_inset.blockscene, 0, 0, 150)

# Условные обозначения
Legend(fig[1, 2], [line_main, line_inset], ["Stock Price", "Zoomed Region"])

# Пометим увеличенную выбранную область (x, y, ширина, высота)
border_rect = Rect2(50, min_price, 20, max_price - min_price)
lines!(ax_main, border_rect, color=:black, linewidth=1)

fig

Объяснение ключевых элементов и сопутствующая информация

1. Пиксельные единицы по сравнению с относительными единицами для размера и размещения вставной оси

Пиксельные единицы: используются для указания точного размера в пикселях. Полезны для задания точных размеров в макетах фиксированного размера. Пример: width = 200 задает ширину в 200 пикселей.

Относительные единицы: используются для определения размеров как долей от размера родительского контейнера. Хорошо подходят для создания масштабируемых макетов, адаптирующихся к различным размерам рисунков. Пример: width = Relative(0.2) задает ширину, составляющую 20 % от ширины родительского рисунка.

halign и valign позиционируют вставной график относительно фигуры, значения варьируются от 0 (слева или снизу) до 1 (справа или сверху).

2. Функция `translate!` и Z-упорядочение

Z-порядок (глубина) определяет порядок отрисовки элементов, при котором более высокие z-значения отображаются перед более низкими. Это важно для того, чтобы вставная ось была видна поверх основного графика и его элементов. Задав z-значение явным образом с помощью функции translate!, вы можете накладывать элементы друг на друга по мере необходимости. Если функция translate! опущена или z-значение слишком мало, вставной график может оказаться позади основного графика и будет невидимым или частично заслоненным.

В Makie z-порядок для различных элементов по оси обычно варьируется от --100 до +20; 0 применяется для пользовательских графиков (по умолчанию). Чтобы вставная ось вставки гарантированно отображалась перед главной осью и пользовательскими графиками, ее z-значение должно быть не менее +100. Если вы добавляете пользовательские z-значения для главной оси, убедитесь, что z-значение для вставной оси больше, чем наибольшее z-значение для главной оси плюс 100.

main_axis_translate < inset_axis_translate - 100

Максимально допустимое z-значение — 10 000.

translate!(obj, 0, 0, some_positive_z_value)

3. Пометка части, отображаемой на вставной оси

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

Диапазон по оси x (например, от 50 до 70) для обозначения периода времени.
Диапазон оси y (min_price и max_price) динамически рассчитывается на основе данных в этом временном диапазоне.

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

border_rect = Rect2(50, min_price, 20, max_price - min_price)
lines!(ax_main, border_rect, color=:black, linewidth=1)

Другой подход к пометке выделенной области заключается в использовании функции zoom_lines из пакета MakieExtra.jl. Эта функция не только помечает область, но и соединяет ее со вставной осью направляющими линиями, усиливая визуальную связь между основным и вставным графиками.