Типы диаграмм
Data Race предлагает девять различных режимов диаграмм для каждого набора данных, а также таблицу данных для точных чисел. Каждый режим подчеркивает свой аспект данных — рейтинги, тенденции, состав, географические паттерны, траектории рангов, поток целого или прямое сравнение величин. Это руководство объясняет, что показывает каждая визуализация, как ее читать и когда она наиболее полезна.
Гонка столбчатых диаграмм
Гонка столбчатых диаграмм — это фирменная визуализация Data Race. Она отображает ранжированные объекты в виде горизонтальных полос, где самая длинная полоса представляет наибольшее значение. По мере воспроизведения анимации полосы перемещаются вверх и вниз, отражая изменения рейтингов и создавая динамичный эффект гонки. Каждая полоса имеет цветовую маркировку и подписана с названием объекта, флагом (для стран) и текущим значением.
Когда использовать: Используйте гонку столбчатых диаграмм, когда хотите увидеть, как меняются рейтинги с течением времени. Особенно эффективна для сравнения умеренного числа объектов (10–20) и выявления резких взлётов или падений.
- Длина полосы представляет значение — более длинные полосы означают более высокие значения
- Позиция полосы показывает рейтинг — верхняя полоса занимает 1-е место
- Плавные переходы между периодами показывают изменения рейтингов
- Цвета для каждого объекта остаются неизменными на протяжении всей анимации
Бамп-диаграмма
Бамп-диаграмма отображает рейтинг каждого объекта во времени на оси 1..N, где рейтинг #1 находится вверху. Линии движутся вверх и вниз при изменении рейтингов, а пересечения отмечают моменты обгона. Акцент делается на порядке, а не на абсолютных значениях — напряжённая борьба за 1-е место выглядит одинаково, будь разрыв в один доллар или в триллион. Закреплённые объекты выделяются более яркой линией и ореолом вокруг точки.
Когда использовать: Используйте бамп-диаграмму, когда порядок рейтинга является главной историей — медальные зачёты Олимпиады, топ-10 экономик за столетие, лидерборды с частыми перестановками. Это наиболее наглядный способ увидеть, кто кого обогнал и когда.
- Ось Y — это рейтинг: #1 вверху, #N внизу
- Линия, уходящая вниз или вверх, показывает, что объект теряет или набирает позиции
- Пересечение двух линий = один объект обгоняет другой в данный период
- Горизонтальные линии означают, что рейтинг оставался стабильным
- Объекты за пределами видимого топ-N отображаются в виде плашек у нижнего края
Линейный график
Линейный график отображает значение каждого объекта с течением времени в виде непрерывной линии. Все объекты показаны на одних осях, что облегчает сравнение долгосрочных тенденций. График выделяет текущий период вертикальным маркером, и вы можете навести курсор на любую точку, чтобы увидеть точное значение. Закреплённые объекты выделяются более толстыми линиями, тогда как остальные уходят на второй план.
Когда использовать: Используйте линейный график, когда хотите отслеживать тенденции во времени, сравнивать траектории роста или определять точки пересечения, где один объект превосходит другой.
- Ось Y показывает шкалу значений, ось X показывает временные периоды
- Каждая линия представляет один объект — следите за линией, чтобы увидеть её траекторию
- Более крутые наклоны указывают на более быстрый рост или снижение
- Пересекающиеся линии показывают изменения рейтингов между объектами
Стримграф
Стримграф складывает исходные значения каждого объекта в виде цветных полос вокруг центральной базовой линии, симметрично расширяясь вверх и вниз. Общая высота в любой момент равна суммарному значению всех объектов, поэтому вы видите одновременно состав И общую величину. При воспроизведении поток поступает слева — полосы появляются, расширяются и перебалансируются в единой органической массе. Лучше всего работает с монотонно растущими наборами данных, где общая картина и есть история.
Когда использовать: Используйте стримграф, когда хотите ощутить, как всё целое эволюционирует как единая текущая форма — мировой ВВП взрывается, пока регионы перебалансируются; экосистема OSS расширяется, пока новые библиотеки вытесняют старые; рыночная капитализация растёт, пока секторы ротируются.
- Толщина полосы в любой точке = исходное значение этого объекта в данный период
- Общая высота диаграммы = сумма всех видимых объектов (топ-N + прочие)
- Полосы тянутся слева по мере воспроизведения анимации — ведущий край соответствует текущему моменту
- Центр остаётся на y=0; диаграмма растёт симметрично вверх и вниз
- Флаги отображаются внутри каждой полосы; тонкие полосы сжимаются до узкой полоски цвета
Круговая диаграмма
Круговая диаграмма показывает состав значений для одного временного периода. Каждый сектор представляет долю одного объекта от общего значения. По мере воспроизведения анимации размеры секторов меняются, отражая изменяющиеся пропорции. Диаграмма наиболее информативна, когда несколько крупных объектов доминируют в общей сумме, выявляя паттерны концентрации или диверсификации.
Когда использовать: Используйте круговую диаграмму, когда хотите понять, какую долю каждый объект занимает от общего — например, какие страны производят больше всего CO₂ или имеют наибольшую долю ВВП.
- Размер сектора представляет долю объекта от общего значения
- Наведите курсор на сектор, чтобы увидеть точный процент и значение
- Маленькие секторы объединяются в категорию 'Другие' для сохранения читаемости
- Наблюдайте за ростом или сокращением секторов с течением времени, чтобы определить изменения доминирования
Древовидная карта
Древовидная карта делит область диаграммы на прямоугольники, каждый из которых по размеру пропорционален значению одной сущности — чем больше значение, тем больше прямоугольник. Алгоритм d3-treemapResquarify сохраняет формы квадратными на протяжении периодов, поэтому прямоугольники плавно скользят и изменяют размер, а не хаотично перетасовываются. Сущности с длинным хвостом ниже top-N сворачиваются в плитку 'Другие', которая растет и уменьшается вместе с остальными.
Когда использовать: Используйте древовидную карту, когда история заключается в том, 'сколько от общего числа занимает каждая сущность', и вы хотите, чтобы каждая сущность была упакована в один кадр — без прокрутки, без разделения на отдельные представления.
- Площадь прямоугольника пропорциональна значению сущности
- Самый большой прямоугольник имеет ранг #1 — обычно закреплен в верхнем левом углу
- Формы остаются квадратными по мере обновления макета между периодами, сохраняя читабельность
- Плитки ниже top-N собираются в прямоугольник 'Другие'
- Флаг, название и значение находятся внутри каждого прямоугольника; тонкие плитки опускают флаг, чтобы поместиться
Хороплет-карта
Карта мира окрашивает страны в соответствии с их значениями, используя непрерывную цветовую шкалу. Более тёмные или насыщенные цвета указывают на более высокие значения. Карта даёт немедленный географический обзор, выделяя региональные паттерны и кластеры, которые сложно заметить в других типах диаграмм. Наведите курсор на любую страну, чтобы увидеть её название, значение и рейтинг.
Когда использовать: Используйте карту мира, когда важна география — для выявления региональных кластеров, сравнения соседних стран или просмотра распределения переменной по континентам.
- Интенсивность цвета соответствует значению — проверьте легенду для определения шкалы
- Серые страны не имеют данных за выбранный период
- Региональные паттерны (например, европейский кластер, субсахарский пояс) легко распознаются
- Наведите курсор для точных значений; нажмите для закрепления страны для сравнения
Карта пузырей
Карта пузырей — это карта пропорциональных символов: каждая сущность рисуется как круг, прикрепленный к центроиду своей страны (или региона), с радиусом круга, пропорциональным значению. Положение никогда не меняется — анимируются только радиус и цвет. В результате получается географический снимок, который растет и уменьшается на месте с течением времени, что позволяет легко увидеть 'где' и 'насколько большой' в одном представлении.
Когда использовать: Используйте карту пузырей, когда вам нужна одна визуализация, которая сочетает географию с величиной — например, наблюдая, как рыночная капитализация концентрируется в нескольких прибрежных городах США, в то время как меньшие пузыри загораются по всей Азии и Европе.
- Позиция круга фиксирована в центроиде каждой страны
- Радиус круга пропорционален значению в текущем периоде
- Значение центрировано внутри круга (без флага — местоположение идентифицирует сущность)
- Цвет следует палитре категории сущности, затухая при выходе из top-N
- Периоды без данных не показывают круг для этой сущности
Пузырьки
Диаграмма пузырьков упаковывает каждую сущность в виде свободно плавающего круга, размер которого определяется значением, при этом d3-force разрешает столкновения, так что круги плотно группируются без перекрытия. Макет упаковки пересчитывается для каждого периода и интерполируется между смежными периодами для плавной анимации. Осей нет — положение не несет количественного значения; только размер. Глобальная шкала √(value) надежно сохраняет самую большую сущность самой большой по мере эволюции данных.
Когда использовать: Используйте диаграмму пузырьков, когда вам нужно чистое сравнение величин, освобожденное от осей и географии — идеально для того, чтобы с первого взгляда понять, 'что больше и насколько' среди top сущностей.
- Радиус круга пропорционален √(value) — самая большая сущность получает самый большой круг
- Положение декоративное; круги дрейфуют, но их пиксельное расположение не имеет значения
- Флаг размещается на 18px, когда позволяет место; скрывается в кругах размером менее 4px
- Агрегированный режим (регион/группа) центрирует значение без флага
- Цвет следует палитре категории сущности
Таблица данных
Таблица данных представляет все значения в сортируемой прокручиваемой сетке. Каждая строка показывает объект с его рейтингом, названием, значением, глобальной долей и изменением год к году. В отличие от анимированных диаграмм, таблица показывает точные числа, что делает её идеальной для детальных сравнений и проверки данных. Сортируйте по любому столбцу, чтобы найти лучших исполнителей, наибольшие изменения или конкретные объекты.
Когда использовать: Используйте таблицу данных, когда нужны точные числа, а не визуальные впечатления — для проверки фактов, детальных сравнений или экспорта данных для дальнейшего анализа.
- Сортируйте по столбцу 'Значение', чтобы увидеть наибольшие или наименьшие записи
- Столбец 'Изменение' показывает рост или снижение по сравнению с предыдущим периодом
- Используйте столбец 'Доля' для сравнения доли каждого объекта от глобального итога
- Скачайте таблицу в формате CSV для использования в таблицах или исследованиях
Выбор подходящей диаграммы
Каждый тип диаграммы отвечает на свой вопрос. Столбчатая диаграмма отвечает 'Кто выигрывает прямо сейчас?' Ранг диаграмма отвечает 'Кто кого опередил по рангу?' Линейная диаграмма отвечает 'Как эволюционировало каждое значение?' Стримграф отвечает 'Как целое течет как одно?' Круговая диаграмма отвечает 'Какую долю занимает каждый в этот момент?' Древовидная карта отвечает 'Сколько от общего числа занимает каждый?' Хороплет-карта отвечает 'Где географически значения самые высокие?' Карта пузырей отвечает 'Насколько велики — и где?' Диаграмма Пузырьки отвечает 'Как сравниваются необработанные величины?' А таблица отвечает 'Каковы точные числа?' Переключение между представлениями одного и того же набора данных дает вам полную картину данных с разных сторон.
- Рейтинги и конкуренция → Столбчатая
- Траектории рангов и обгоны → Ранг
- Долгосрочные тенденции и траектории → Линейная
- Композиция, текущая во времени → Стримграф
- Доля в моменте → Круговая
- Все сущности, упакованные в один кадр → Древовидная карта
- Географические паттерны → Хороплет-карта
- География + величина в одном виде → Карта пузырей
- Сравнение чистой величины → Пузырьки
- Точные значения и экспорт → Таблица данных