В библиотеке Nivo визуализация данных строится вокруг строгого разделения между данными и их отображением на координатной плоскости. Центральным механизмом этого преобразования выступают шкалы (scales), определяющие, как значения домена (domain) переводятся в пиксельные координаты диапазона (range). Внутри Nivo используется подход, основанный на концепциях D3-scale, где каждая шкала представляет собой функцию отображения данных в визуальное пространство графика.
Шкалы задаются отдельно для осей X и Y и являются ключевым элементом
конфигурации компонентов ResponsiveLine,
ResponsiveBar, ResponsiveScatterPlot и других
графиков. В типичной конфигурации шкала описывается через объект
xScale или yScale, где указывается тип
преобразования и дополнительные параметры.
Линейная шкала является базовым типом преобразования числовых данных. Она используется, когда значения равномерно распределены и нет необходимости в нелинейной трансформации.
Характеристики линейной шкалы:
Пример конфигурации:
xScale={{
type: 'linear',
min: 0,
max: 'auto'
}}yScale={{
type: 'linear',
min: 0,
max: 100,
stacked: false,
reverse: false
}}Параметр min и max задаёт границы домена.
Значение 'auto' позволяет Nivo автоматически вычислить
пределы на основе входных данных. Опция stacked применяется
в столбчатых графиках и влияет на накопление значений.
Линейная шкала используется по умолчанию в большинстве случаев, когда данные представляют собой непрерывные измерения: температура, значения метрик, финансовые показатели.
Логарифмическая шкала применяется для данных с экспоненциальным ростом или сильной диспропорцией значений. Она позволяет визуализировать широкий диапазон данных, сжимая большие значения и растягивая малые.
Основные свойства:
Пример:
xScale={{
type: 'log',
base: 10,
min: 1,
max: 'auto'
}}Параметр base задаёт основание логарифма. Чаще всего
используется 10 или e. Важно учитывать, что значения домена должны быть
строго положительными.
Логарифмическая шкала часто используется для:
SymLog (symmetric log scale) представляет собой гибрид линейной и логарифмической шкалы. Она позволяет работать с данными, содержащими нулевые и отрицательные значения, сохраняя при этом логарифмическое сжатие для больших величин.
Ключевая особенность — наличие зоны линейного отображения вокруг нуля.
Основные параметры:
yScale={{
type: 'symlog',
constant: 1,
min: -100,
max: 100
}}Параметр constant определяет область линейного поведения
вокруг нуля. Чем больше значение, тем шире линейная зона.
Поведение:
Применение:
Шкала времени используется для работы с датами и временными рядами.
Она преобразует объекты Date в координаты на основе
временной оси.
Особенности:
Пример:
xScale={{
type: 'time',
format: 'native',
precision: 'day',
useUTC: false,
min: new Date('2024-01-01'),
max: new Date('2024-12-31')
}}Параметр precision определяет уровень детализации (день,
час, месяц и т.д.). format: 'native' означает использование
стандартных Date-объектов без предварительного парсинга строк.
Шкала времени применяется в:
Point scale — это разновидность ordinal-шкалы, в которой каждому значению домена соответствует фиксированная точка на оси. Расстояние между точками одинаковое.
Особенности:
Пример:
xScale={{
type: 'point'
}}Используется, когда данные представляют собой набор категорий без количественной интерпретации расстояний между ними:
Point-scale часто применяется в линейных графиках с категориальной осью X.
Band scale используется для визуализации категориальных данных с учётом ширины каждого элемента. Это основной тип шкалы для столбчатых диаграмм.
Характерные особенности:
Пример:
xScale={{
type: 'band',
padding: 0.3
}}Дополнительные параметры:
yScale={{
type: 'linear',
min: 0,
max: 'auto'
}}Параметр padding регулирует расстояние между столбцами.
Значение 0 означает отсутствие промежутков, значение ближе к 1
увеличивает расстояния.
Band scale применяется в:
Каждый компонент Nivo интерпретирует шкалы по-разному в зависимости от типа визуализации.
В ResponsiveLine:
xScale чаще всего linear,
time или point;yScale — непрерывная шкала (linear или symlog).В ResponsiveBar:
xScale почти всегда band;yScale — linear или stacked linear.В ResponsiveScatterPlot:
linear или time;Пример комбинированной конфигурации:
xScale={{
type: 'time',
format: 'native',
precision: 'day'
}}
yScale={{
type: 'linear',
min: 0,
max: 'auto'
}}Каждая шкала в Nivo оперирует двумя фундаментальными понятиями:
Хотя Nivo часто автоматически вычисляет domain, его можно задавать явно:
xScale={{
type: 'linear',
min: 0,
max: 100
}}Для временных шкал:
xScale={{
type: 'time',
min: new Date('2024-01-01'),
max: new Date('2024-12-31')
}}Автоматическое определение домена позволяет адаптировать график под входные данные, однако явная настройка используется при необходимости фиксированной визуальной структуры.
При изменении диапазонов данных Nivo пересчитывает шкалы динамически. Это влияет на:
Логарифмические и symlog шкалы требуют особого внимания при анимациях, поскольку изменение домена может резко менять визуальное расстояние между точками.