Компонент Bump: ранговые графики

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

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

Базовая структура данных для Bump строится вокруг массива серий:

const data = [
  {
    id: "React",
    data: [
      { x: 2018, y: 1 },
      { x: 2019, y: 1 },
      { x: 2020, y: 2 },
      { x: 2021, y: 1 }
    ]
  },
  {
    id: "Vue",
    data: [
      { x: 2018, y: 2 },
      { x: 2019, y: 3 },
      { x: 2020, y: 3 },
      { x: 2021, y: 2 }
    ]
  }
];

Поле x определяет временную или категориальную ось, а y — позицию в ранге, где меньшее значение означает более высокую позицию.

Основные принципы отображения рангов

Компонент Bump в Nivo работает по принципу упорядочивания значений по оси Y. В отличие от линейных графиков, здесь нет интерполяции значений как чисел — вместо этого происходит визуализация перестановок.

Ключевые особенности:

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

Это делает Bump особенно подходящим для сравнительного анализа.

Базовая настройка компонента Bump

Компонент импортируется из @nivo/bump:

import { Bump } from '@nivo/bump';

Простейшая конфигурация:

<Bump
  data={data}
  width={800}
  height={400}
  colors={{ scheme: 'category10' }}
  lineWidth={3}
  activeLineWidth={6}
  inactiveLineWidth={2}
  inactiveOpacity={0.2}
/>

Ключевые параметры

  • data — массив серий ранговых значений
  • width / height — размеры контейнера
  • colors — схема окраски линий
  • lineWidth — базовая толщина линий
  • activeLineWidth — толщина активной линии при взаимодействии
  • inactiveOpacity — прозрачность неактивных элементов

Интерполяция и поведение линий

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

Основные режимы интерполяции:

  • spline — сглаженные кривые
  • linear — прямые сегменты
  • catmullRom — более мягкие кривые переходов

Пример настройки:

<Bump
  data={data}
  interpolation="catmullRom"
/>

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

Управление осями и масштабированием

Ось X в Bump обычно категориальная или временная, а ось Y фиксирована и отражает ранг.

Настройка осей:

<Bump
  data={data}
  axisTop={null}
  axisBottom={{
    tickSize: 5,
    tickPadding: 5,
    tickRotation: 0
  }}
/>

Ось Y часто скрывается, поскольку числовая шкала не несёт самостоятельной аналитической ценности:

<Bump
  data={data}
  axisLeft={null}
/>

Цветовое кодирование и идентификация серий

Цвета играют ключевую роль в различении линий. В Nivo доступны предустановленные схемы:

  • category10
  • nivo
  • dark2
  • set3

Пример:

<Bump
  data={data}
  colors={{ scheme: 'set3' }}
/>

Также возможно использование функции для динамического назначения цвета:

<Bump
  data={data}
  colors={(serie) => {
    if (serie.id === 'React') return '#61dafb';
    return '#888';
  }}
/>

Взаимодействие и выделение данных

Bump-компонент поддерживает интерактивность, которая критична для анализа рангов.

Основные механики:

  • hover-подсветка линии
  • выделение активной серии
  • затемнение остальных элементов

Пример настройки поведения:

<Bump
  data={data}
  activeOpacity={1}
  inactiveOpacity={0.1}
  enableGridX={true}
  enableGridY={false}
/>

При наведении линия может расширяться и отображать дополнительные маркеры.

Точки данных и их визуализация

Каждая точка на линии представляет конкретный ранг в определённый момент времени. Их отображение может быть включено или отключено:

<Bump
  data={data}
  pointSize={8}
  activePointSize={12}
  useMesh={true}
/>

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

Кастомизация слоёв

Архитектура Nivo позволяет управлять слоями отрисовки. Bump поддерживает добавление пользовательских слоёв поверх стандартных.

Стандартные слои:

  • линии
  • точки
  • сетка
  • оси
  • аннотации

Пример расширения:

<Bump
  data={data}
  layers={[
    'grid',
    'axes',
    'lines',
    'points',
    'mesh',
    (props) => {
      return props.series.map(serie => (
        <text
          key={serie.id}
          x={10}
          y={10}
        >
          {serie.id}
        </text>
      ));
    }
  ]}
/>

Кастомные слои позволяют добавлять бизнес-логику прямо в визуализацию.

Анимация переходов

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

Основные параметры анимации:

<Bump
  data={data}
  animate={true}
  motionConfig="gentle"
/>

Доступные конфигурации motion:

  • wobbly
  • gentle
  • stiff
  • slow

Анимация влияет на плавность перемещения линий и точек между состояниями данных.

Работа с отсутствующими значениями

В реальных данных часто встречаются пропуски. Bump обрабатывает их через стратегии missingDataBehavior:

  • skip — пропуск точки
  • extend — протяжка последнего значения
  • interpolate — интерполяция между известными точками

Пример:

<Bump
  data={data}
  missingDataBehavior="interpolate"
/>

Выбор стратегии зависит от характера данных: рейтинги обычно используют skip, аналитика трендов — interpolate.

Производительность при больших наборах данных

При большом количестве серий важно учитывать нагрузку на отрисовку.

Оптимизационные подходы:

  • ограничение количества отображаемых серий
  • отключение анимации
  • снижение частоты обновления данных
  • использование useMesh вместо большого числа точек

Пример оптимизированного режима:

<Bump
  data={data}
  animate={false}
  enableGridX={false}
  enableGridY={false}
  pointSize={4}
/>

Практическая интерпретация ранговых графиков

Bump-графики используются там, где важна динамика порядка:

  • рейтинги приложений
  • спортивные турниры
  • сравнение брендов
  • изменение популярности технологий
  • анализ конкурентных позиций

Смысл анализа заключается в выявлении:

  • устойчивых лидеров
  • резких скачков позиций
  • стабильных аутсайдеров
  • периодов высокой волатильности

Каждая линия становится траекторией конкурентного поведения во времени.

Оглавление