Data Race

图表类型详解

Data Race 为每个数据集提供九种不同的图表模式,以及一个用于精确数字的数据表。每种模式都突出显示数据的不同方面——排名、趋势、构成、地理模式、排名轨迹、整体的流动或直接的量级比较。本指南解释了每种可视化显示的内容、如何阅读以及何时最有用。

条形图竞赛

条形图竞赛是 Data Race 的标志性可视化形式。它将排名实体显示为水平条形,最长的条形代表最高值。随着动画播放,条形上下移动以反映排名变化,产生动态竞赛效果。每个条形都有颜色编码,并标注实体名称、国旗(针对国家)和当前数值。

何时使用: 当您想查看排名如何随时间变化时使用。它特别适合比较适量实体(10至20个),并发现戏剧性的上升或下降。

  • 条形长度代表数值——条形越长,数值越高
  • 条形位置显示排名——最顶部的条形为第1名
  • 时间段之间的平滑过渡展示排名变化
  • 整个动画过程中,每个实体的颜色保持一致

凹凸图

凹凸图将每个实体的排名随时间绘制在 1..N 轴上,排名第 1 位于顶部。每当排名发生变化时,线条上下穿梭,交叉点标记着超越的瞬间。关注的是顺序,而非绝对值——无论差距是一美元还是一万亿,争夺第 1 名的激烈程度在图中看起来一样。已固定的实体以更亮的线条和点周围的光晕突出显示。

何时使用: 当排名顺序就是故事时使用凹凸图——奥运奖牌榜、一个世纪内前十大经济体、排名频繁变动的排行榜。这是查看「谁在何时超越了谁」的最清晰方式。

  • Y 轴代表排名:第 1 名在顶部,第 N 名在底部
  • 线条下沉或上升表示该实体排名下降或上升
  • 两条线交叉 = 一个实体在该时期超越了另一个
  • 水平线表示排名保持稳定
  • 超出可见 Top-N 范围的实体以筹码形式显示在底部边缘

折线图

折线图将每个实体随时间变化的数值绘制为连续曲线。所有实体显示在同一坐标轴上,便于比较长期趋势。图表用垂直标记突出当前时间段,您可以将鼠标悬停在任意点上查看精确数值。固定的实体以较粗的线条突出显示,其他实体则淡入背景。

何时使用: 当您想追踪随时间变化的趋势、比较增长轨迹,或识别一个实体超越另一个实体的交叉点时使用。

  • Y 轴显示数值刻度,X 轴显示时间段
  • 每条线代表一个实体——跟随一条线即可看到其发展轨迹
  • 斜率越陡表示增长或下降越快
  • 交叉的线条表示实体之间的排名变化

流线图

流线图将每个实体的原始值以彩色色带的形式堆叠在以中心基线为轴的上下两侧,形成对称增长。任意时刻的总高度等于所有实体的合计值,因此可同时看到构成和总量。播放时,流从左侧涌入——色带出现、膨胀并在一个有机整体中重新平衡。最适合单调增长的数据集,即整体趋势本身就是故事的场合。

何时使用: 当您想感受整体如何作为一个流动的有机体演变时使用——世界 GDP 爆炸式增长而各地区重新均衡、开源生态扩张而新库取代旧库、市值增长而各板块轮动。

  • 任意点的色带厚度 = 该实体在该时期的原始值
  • 图表总高度 = 所有可见实体之和(Top-N + 其他)
  • 色带随动画播放从左侧延伸——前沿即为当前时刻
  • 中心保持在 y=0;图表向上下两侧对称增长
  • 旗帜显示在各色带内;细色带缩减为一条细线

饼图

饼图显示单一时间段内数值的构成。每个扇形代表一个实体占总量的份额。随着动画播放,扇形大小调整以反映变化的比例。当少数大型实体主导总量时,图表信息量最为丰富,能揭示集中或分散的模式。

何时使用: 当您想了解每个实体占总量的份额时使用——例如哪些国家排放最多 CO₂ 或拥有最大的 GDP 份额。

  • 扇形大小代表实体占总量的份额
  • 将鼠标悬停在扇形上可查看精确百分比和数值
  • 小扇形会归入「其他」以保持可读性
  • 注意随时间增大或缩小的扇形,以发现主导地位的转变

树状图

树状图将图表区域划分为矩形,每个矩形的大小与一个实体的值成比例——值越大,矩形越大。d3-treemapResquarify 算法使形状在不同时期保持方形,因此矩形会平稳滑动和调整大小,而不是混乱地重新洗牌。top-N 下方的长尾实体会折叠成一个“其他”瓷砖,它会随其余部分一起增长和缩小。

何时使用: 当故事是“每个实体占总数的多少”并且您希望每个实体都打包在一个框架中时,请使用树状图——无需滚动,无需切分成单独的视图。

  • 矩形面积与实体的值成比例
  • 最大的矩形是排名 #1 — 通常锚定在左上方
  • 布局在时期之间更新时,形状保持方形,保持可读性
  • top-N 下方的瓷砖会聚集到“其他”矩形中
  • 旗帜、名称和值位于每个矩形内部;细小的瓷砖会为了适应而省略旗帜

分级统计图

世界地图使用连续色阶根据数值为各国着色。颜色越深或越鲜艳表示数值越高。地图提供即时的地理概览,突出显示在其他图表类型中难以发现的区域模式和聚类。将鼠标悬停在任意国家上可查看其名称、数值和排名。

何时使用: 当地理位置至关重要时使用——用于识别区域聚类、比较邻国,或查看某变量在各大洲的分布情况。

  • 颜色深浅对应数值——请查看图例了解刻度
  • 灰色国家在所选时间段没有可用数据
  • 区域模式(如欧洲聚类、撒哈拉以南非洲地带)易于识别
  • 悬停查看精确数值;点击可固定某国以便比较

气泡地图

气泡地图是比例符号地图:每个实体都以一个圆形绘制,固定在其国家(或地区)的质心,圆的半径与值成比例。位置从不移动——只有半径和颜色会动画。结果是一个地理快照,它会随着时间的推移在原地增长和缩小,使得在一个视图中同时看到“在哪里”和“多大”变得容易。

何时使用: 当您想要一个将地理与量级结合在一起的单一视觉效果时,请使用气泡地图——例如,观察市值集中在少数美国沿海城市,而亚洲和欧洲的小气泡则亮起来。

  • 圆形位置固定在每个国家的质心
  • 圆形半径与当前时期的值成比例
  • 值位于圆心(无旗帜——位置标识实体)
  • 颜色遵循实体的类别调色板,当它从 top-N 中掉出时会褪色
  • 没有数据的时期不显示该实体的圆形

气泡图

气泡图将每个实体打包成一个按值大小的自由浮动圆形,d3-force 解决碰撞,使圆形紧密聚集而不会重叠。打包布局会按每个时期重新计算,并在相邻时期之间进行插值以实现平滑动画。没有轴——位置不带任何定量意义;只有大小才有。全局 √(value) 比例尺可确保数据演变时,最大实体始终保持最大。

何时使用: 当您想要纯粹的量级比较,不受轴和地理限制时,请使用气泡图——非常适合一眼看出 top 实体中“哪个更大,大多少”。

  • 圆形半径与 √(value) 成比例——最大的实体获得最大的圆形
  • 位置是装饰性的;圆形会漂移,但它们的像素位置没有价值意义
  • 旗帜在允许时位于 18px;在小于 4px 的圆形中隐藏
  • 聚合模式(区域/组)将值居中,没有旗帜
  • 颜色遵循实体的类别调色板

数据表

数据表以可排序、可滚动的网格形式呈现所有数值。每行显示一个实体的排名、名称、数值、全球份额和同比变化。与动画图表不同,数据表显示精确数字,非常适合详细比较和数据核验。按任意列排序,可找出表现最佳者、变化最大者或特定实体。

何时使用: 当您需要精确数字而非视觉印象时使用——用于事实核查、详细比较或导出数据以供进一步分析。

  • 按「数值」列排序可查看最高或最低的条目
  • 「变化」列显示与上一时间段相比的增长或下降
  • 使用「份额」列比较每个实体占全球总量的比例
  • 将表格下载为 CSV,用于电子表格或研究

选择合适的图表

每种图表类型都回答一个不同的问题。条形图回答“现在谁赢了?”排名图回答“谁在排名中超越了谁?”折线图回答“每个值是如何演变的?”河流图回答“整体如何作为一个整体流动?”饼图回答“每个部分在这一刻占据了多少份额?”树状图回答“每个部分占总数的多少?”分级统计图回答“地理上值最高的地方在哪里?”气泡地图回答“多大——在哪里?”气泡图回答“原始量级如何比较?”表格回答“确切数字是多少?”在同一数据集上切换视图可以从多个角度为您提供数据的完整图像。

  • 排名和竞争 → 条形图
  • 排名轨迹和超越 → 排名图
  • 长期趋势和轨迹 → 折线图
  • 随时间流动的构成 → 河流图
  • 某一时刻的份额 → 饼图
  • 所有实体打包在一个框架中 → 树状图
  • 地理模式 → 分级统计图
  • 地理 + 量级在一个视图中 → 气泡地图
  • 纯量级比较 → 气泡图
  • 精确值和导出 → 数据表