OpenMontage 视频数据可视化实战指南：从图表选型到 Remotion 动效落地

本指南围绕 OpenMontage 开源视频生产系统中 skills/creative/data-visualization.md 技能文档展开，系统讲解在视频场景中如何把统计数据、对比、趋势、构成与关键指标转化为清晰、准确、有冲击力的可视化画面，并覆盖图表类型决策、动画编排、标签布局、数据密度、色彩纪律与可访问性六条主线。读完本文，你将掌握一套可直接套用的图表选型决策树、三种标准动画叙事模式、1080p 字号与对比度底线，以及如何将图表设计无缝接入场景导演（Scene Director）的 JSON 场景规格。

一、技能定位：什么时候调用数据可视化

在 OpenMontage 的 Agent 技能体系中，data-visualization 属于 skills/creative/ 目录下的创作类技能（其兄弟技能还包括 video-editing.md、storytelling.md、data-visualization.md 等）。它的触发条件是：某个场景需要以视觉形式呈现数据——统计数据、对比、趋势、构成比例或关键指标。

该技能回答四个核心问题：

1. 该用哪种图表？——由"图表类型决策树"决定；
2. 图表怎么动起来？——由"动画编排"三模式与计时规则决定；
3. 标签放哪里？字号多大？——由"标签放置规则"与"数据密度 vs 可读性"决定；
4. 颜色怎么取？——由"从 Playbook 派生图表颜色"决定。

在 OpenMontage 的完整生产管线中，数据可视化并非孤立环节：它既依赖底层生成工具（diagram_gen、image_selector、Manim），也依赖渲染侧的能力（Remotion 图表组件），最终通过场景导演的 movement、overlay_notes、required_assets 字段落到每个场景的具体规格上。

二、工具矩阵：四条图表生产路径

技能文档给出了四类工具，各自的角色与适用边界如下：

工具	角色	适用场景
diagram_gen	通过 Mermaid 或 D3 生成图表/流程图	技术架构图、流程示意、结构框图
image_selector	生成风格化图表插画（FLUX / GPT Image）	需要艺术化、插画风的数据呈现
Remotion	动画图表组件（条形生长、折线绘制、饼图填充）	最终成片中的正式数据图表镜头
Manim	数学绘图、坐标系、函数图像	数学动画、函数曲线、几何演示

2.1 diagram_gen：Mermaid 优先、Pillow 兜底

在源码 tools/graphics/diagram_gen.py 中，diagram_gen 工具被实现为 DiagramGen 类（继承自 BaseTool），其输入模式（input_schema）支持三种 diagram_type：

• mermaid：直接渲染 Mermaid 语法，优先调用 mmdc（Mermaid CLI），支持 theme（dark/light/neutral，默认 dark）、width（默认 1200）、height（默认 800）等参数；渲染时以 -b transparent 输出透明背景，便于后续合成；
• flowchart / boxes：使用 Pillow 绘制方框箭头图，支持 boxes（label + color）、connections（from/to/label）与 title，内置三套主题色板；
• 当 Mermaid 与 Pillow 都不可用时，get_status() 返回 UNAVAILABLE。

diagram_gen 的依赖安装方式在源码中同样注明：npm install -g @mermaid-js/mermaid-cli 或 pip install Pillow。

2.2 Remotion：数据图表的最终渲染通道

技能文档强调"视频中的每张图表都应该是动画的"，而这正是 Remotion 图表组件承担的角色。在 remotion-composer/src/components/charts/index.ts 导出的一套图表组件中，每个组件都按 1920x1080 画布设计，并通过 Remotion 的 spring 与 interpolate 驱动动画。关于 Remotion 在 OpenMontage 中的整体路由（默认合成引擎、场景类型、图表动画枚举），可参考 skills/core/remotion.md。

三、图表类型决策树：先讲对故事，再选对图表

技能文档给出了一套自上而下、命中即停的决策逻辑，这是数据可视化场景的第一道闸门：

Is there data to visualize?
  NO  -> Use a text card or stat card instead
  YES -> How many data points?
           < 3 -> Use text or stat card (charts look empty with 1-2 points)
           3-9 -> Continue to "What story does the data tell?"
           > 12 -> Simplify first: aggregate into top-N + "Other", then continue

What story does the data tell?
  |-- Comparing quantities across categories?
  |     -> BAR CHART (horizontal if labels are long)
  |-- Showing a trend over time?
  |     -> LINE CHART (area chart if showing volume)
  |-- Showing parts of a whole?
  |     -> PIE / DONUT CHART (max 5-6 slices)
  |     (If > 6 categories, aggregate smallest into "Other")
  |-- Showing key metrics / KPIs?
  |     -> KPI GRID (3-6 stat cards in a grid layout)
  |-- Showing ranking or ordered list?
  |     -> HORIZONTAL BAR CHART (sorted descending)
  |-- Showing before/after or change?
  |     -> PAIRED BAR CHART or STAT CARD with delta arrow
  |-- Showing correlation between two variables?
  |     -> LINE CHART with dual series (avoid scatter in video -- too dense)
  |-- None of the above?
  |     -> Default to BAR CHART (most universally readable)

几个关键判据值得展开：

• 数据量先决条件：少于 3 个数据点时图表会显得"空"，应改用文本卡或统计卡；多于 12 个类别时先做聚合（Top 5~7 + "Other"）再画图；
• 散点图在视频中是禁忌：相关性比较优先用双序列折线图，因为散点图在 5~7 秒的画面窗口内过于密集，观众无法完成"定位—对照—理解"的阅读动作；
• 条形图是最终兜底：它是最普适、最易读的图表形态。

3.1 何时不要用图表

场景	替代方案
少于 3 个数据点	统计卡或文字叠加："Revenue grew 40% to $2.1M"
超过 12 个类别	聚合为 Top 5~7 + "Other" 后再制图
仅需强调单个数字	全屏统计卡 + 冲击力动画
定性对比	并排图片或文字表格
数据需要 30 秒以上阅读	拆分成多个更简单的图表，跨场景呈现

这里的"统计卡"（Stat Card）在 OpenMontage 中有对应的 Remotion 实现 remotion-composer/src/components/StatCard.tsx：默认 statFontSize = 128、subtitleFontSize = 36，数字以 spring 从 0.8 缩放到 1.0 弹出，副标题延迟 8 帧淡入——正是技能文档所说"全屏统计卡 + 冲击力动画"的落点。

四、动画编排：三种标准叙事模式

技能文档的核心理念是：静态图表在视频中像幻灯片，不是视频。因此每种图表都要有明确的动画叙事。

4.1 模式一：Build-Up（默认模式）

先显示空坐标轴/画框，再让数据依次进场：

Frame 0.0s: Empty chart frame (axes, title, gridlines visible)
Frame 0.3s: First data element begins animating in
Frame 2.0s: All data elements fully rendered
Frame 2.0-5.0s: Hold for readability

对应到具体图表类型的动画语言：

• 条形图：柱子从基线向上生长，从左到右错峰入场，每根延迟 0.1s；
• 折线图：线条沿数据路径从左到右"绘制"；
• 饼图/环图：从 12 点钟方向顺时针填充，最大的扇区先出现；
• KPI 网格：数字从 0 滚动到目标值（里程表效果）。

4.2 模式二：Narrative Highlight（叙事高亮）

当旁白逐点讲解数据时，让画面聚焦与声音同步：

Frame 0.0s: Full chart visible but all elements at 30% opacity (desaturated)
Frame 0.5s: First highlighted element goes full color + slight scale-up
Frame 3.0s: First element returns to normal, second element highlights
...continue for each narrated point

4.3 模式三：Comparison Reveal（对比揭示）

先展示基线，再动画化变化过程：

Frame 0.0s: Baseline data visible (e.g., "Before" bars)
Frame 2.0s: Hold baseline for comprehension
Frame 2.5s: Animate change (bars grow/shrink to "After" values)
Frame 3.5s: Delta labels appear (+40%, -15%, etc.)
Frame 3.5-7.0s: Hold for readability

适用于前后对比、同比、A/B 测试等叙事。

4.4 计时规则与硬性底线

元素	动画时长	停留时长
图表构建（build-up）	2~4 秒	3~5 秒
单元素高亮	0.3~0.5 秒	2~3 秒
对比过渡	1~2 秒	3~5 秒
KPI 计数器	1.5~2 秒	2~3 秒
标签/批注出现	0.2~0.3 秒	常驻屏幕

关键规则：图表必须完整构建并停留至少 3 秒后才允许场景切换。观众需要时间阅读；如果旁白在图表可读之前就推进了，要么延长场景，要么简化图表。

4.5 源码印证：Remotion 图表组件的动画实现

动画规则在 remotion-composer/src/components/charts/BarChart.tsx 中有着一一对应的实现：

• BarChart 的 animationStyle 支持三种取值：grow-up（默认，spring 弹跳生长，config: { damping: 14, stiffness: 80 }）、slide-in（线性插值滑入）、pop（快速弹跳，damping: 8, stiffness: 150, mass: 0.6）；
• 错峰入场通过 const staggerDelay = i * 4; 实现——每一根柱子比前一根晚 4 帧（约 0.13s@30fps），与技能文档"0.1s 延迟"吻合；
• 柱子从基线生长：animatedHeight = barHeightFull * barProgress，即高度随动画进度从 0 增长到全值；
• 数值标签在 barProgress >= 0.7 时才淡入（interpolate(barProgress, [0.7, 1], [0, 1])），保证标签出现时柱子已经足够高、不会悬空；
• 组件内置了网格线（5 等分）、坐标轴，以及结尾 15 帧的整体淡出（fadeOut），与 Playbook 的转场衔接。

remotion-composer/src/components/charts/KPIGrid.tsx 则实现了技能文档的 KPI 网格规范：

• animationStyle 支持 count-up（里程表数字滚动）、pop（卡片弹入）、cascade（卡片级联滑入）三种模式；
• 数字滚动通过 Math.round(metric.value * countProgress) 实现"从 0 滚动到终值"；
• change 字段渲染 Δ 指示器：正数显示绿色 ▲，负数显示红色 ▼，并在延迟 18~25 帧后淡入——正是"Green up, red down"；
• 卡片采用 borderLeft: 4px solid ${accentColor} 的左侧强调条，符合现代仪表盘审美。

五、标签放置规则：让每一个元素都有"名分"

技能文档按图表类型给出了精细的标签规范，这些规则直接决定画面在 5~7 秒窗口内的可读性：

5.1 条形图

Vertical bars:
  - Value labels: ABOVE each bar (or INSIDE if bar is tall enough for legible text)
  - Category labels: Below on x-axis, horizontal text
  - If labels overlap: rotate 45 degrees or use horizontal bars instead
  - Y-axis: include gridlines, omit axis label if title makes it obvious

Horizontal bars:
  - Value labels: TO THE RIGHT of each bar
  - Category labels: Left-aligned on y-axis
  - Preferred when category names are longer than 2 words

在 BarChart.tsx 中可以看到实现细节：数值标签位于 barY - 12（柱顶上方 12px），类别标签位于 chartBottom + 40（x 轴下方），字号分别为 22px 与 20px；柱宽被限制在 Math.min((chartWidth - totalGap) / barCount, 120)，避免过宽柱子造成的失衡感。

5.2 折线图

  - Endpoint labels: Show value at the last data point (right end)
  - Start label: Show value at the first data point (left end) for context
  - Dense data (>7 points): Label only start, end, and notable peaks/valleys
  - Avoid: Labels on every point (creates clutter in video)
  - Legend: Top-right or inline (label next to the line) for multi-series

折线图组件 remotion-composer/src/components/charts/LineChart.tsx 的实现要点：yMax 取数据最大值再上浮 10% 作为余量（yMax * 1.1），Y 轴始终从 0 开始；支持 draw（路径绘制）与 fade-in 两种动画；showMarkers 控制数据点标记、showLegend 控制图例显示，便于稀疏标注。

5.3 饼图 / 环图

  - Large slices (>= 10%): Label INSIDE the slice (percentage + category)
  - Small slices (< 10%): Label OUTSIDE with leader line connecting to slice
  - Center of donut: Use for total value or key metric label
  - Maximum: 5-6 slices. Combine anything under 5% into "Other"
  - Always show percentages, not just raw values

5.4 KPI 网格

  - Large number: Center of each card, using stat_card font (3-4x body size)
  - Label: Below the number, smaller font, describes the metric
  - Delta indicator: Small arrow + percentage showing change (green up, red down)
  - Grid: 2x2 or 3x2 layout, evenly spaced, consistent card sizing

在 KPIGrid.tsx 中：数字字号 56px/字重 800、标签字号 22px/字重 500、Δ 指示器 20px/字重 600，卡片采用 gridPadding = 100、cardGap = 28 的均匀网格排布——与"stat_card 字号 3~4 倍正文"的要求一致（可对照 styles/clean-professional.yaml 中 stat_card: size_multiplier: 3.0）。

5.5 通用标签规则

• 标题必须存在：每张图表都要有清晰标题（左上或顶部居中）；
• 来源引用：数据来自外部时，在底部小字标注 Source: [name]；
• 单位必显：在标题或坐标轴上显示单位（%、$、秒等）；
• 无孤儿元素：每个视觉元素都要有标签或被旁白解释。

六、数据密度 vs 可读性：视频不是电子表格

技能文档反复强调一个事实：观众无法暂停、滚动或放大。每个数据点都在 5~7 秒的窗口内争夺注意力。

Ideal data points per chart type:
  Bar chart:     5-7 bars (max 9)
  Line chart:    5-12 points (max 15, but label sparsely)
  Pie chart:     3-5 slices (max 6)
  KPI grid:      3-6 metrics (max 6)

6.1 简化策略

问题	解决方案
类别过多（>9）	只展示 Top 5~7，其余聚合进 "Other"
时间周期过多	聚合（月度 → 季度，日 → 周）
指标过多	拆成多个图表跨场景呈现
数值跨度大	用归一化/百分比视图替代绝对值
小数精度	激进取整：$1,234,567 → $1.2M

6.2 字号底线（1080p 基准，不可妥协）

元素	最小值	推荐值
图表标题	32px	36~40px
坐标轴标签	24px	28px
数值标签	24px	28px
批注	20px	24px
来源引用	16px	18px

缩放规则：4K 输出全部乘以 2 倍；720p 输出仍适用以上下限（这是地板，不是天花板）。

OpenMontage 的 Playbook 校验层将这一标准固化为可执行代码：在 styles/playbook_loader.py 中定义了 MIN_VIDEO_BODY_SIZE_PX = 24，validate_accessibility() 会检查正文字号底线（24px）、标题层级（heading 字重须大于 body 且差值建议 ≥200）、stat_card 倍率（建议 ≥2.0x）等，任何违反都会以 warning/error 形式输出。

七、色彩纪律：从 Playbook 派生图表配色

7.1 配色派生优先级

Color derivation priority:
  1. playbook.visual_language.color_palette.chart_palette  (if the playbook defines one)
  2. Derive from primary + accent colors:
       - Bar/slice 1: primary[0]
       - Bar/slice 2: accent[0]
       - Bar/slice 3: primary[1]
       - Bar/slice 4: accent[1]
       - Bar/slice 5+: generate by adjusting lightness of primary[0]
  3. Background: use playbook background color
  4. Text/labels: use playbook text color
  5. Gridlines: use playbook muted color at 50% opacity

chart_palette 是 Playbook 的正式字段。在 schemas/styles/playbook.schema.json 中，它的定义是"ordered array of hex colors for chart data series"，要求至少 2 个、每个都匹配 ^#[0-9A-Fa-f]{6}$；color_rules 字段则支持 harmony_type（complementary/analogous/triadic/split-complementary）、contrast_validation、colorblind_safe 三个开关。

以预置样式 styles/clean-professional.yaml 为例，其 chart_palette 为：

chart_palette:
  - "#2563EB"   # 主色蓝
  - "#F59E0B"   # 强调琥珀
  - "#10B981"   # 成功绿
  - "#8B5CF6"   # 紫
  - "#EF4444"   # 警示红
  - "#06B6D4"   # 青
color_rules:
  harmony_type: "analogous"
  contrast_validation: true
  colorblind_safe: true

这与技能文档示例中 "primary[0] #2563EB、accent[0] #F59E0B" 的取值完全一致，也和 BarChart.tsx 的默认 colors 数组（#2563EB, #F59E0B, #10B981, #EC4899, #06B6D4, #8B5CF6）对齐——从 Playbook → 组件默认值，颜色体系是一脉相承的。

7.2 高亮与聚焦策略

Highlighting strategy:
  - KEY data point:    Full saturation of accent[0], slight scale-up (1.05x)
  - FOCUS data points: Full saturation of their assigned color
  - NON-FOCUS points:  Desaturate to 30% opacity or use muted color
  - BASELINE/CONTEXT:  Dashed lines using muted color

7.3 可访问性规则：绝不只用颜色传义

• 叠加纹理：条形/扇区上使用剖面线、点阵或条纹，与颜色并用；
• 必配标签：每根柱、每个扇区、每条线都要有文字标签，不能只依赖图例；
• 对比度：相邻图表元素之间最小 3:1；
• 色盲安全：避免红绿作为唯一区分手段；表达正负对比时优先蓝橙或蓝黄配对。

OpenMontage 在 styles/playbook_loader.py 中内置了完整的可访问性工具链，可做三层自动校验：

1. validate_contrast(fg, bg)：按 WCAG 2.1 计算相对亮度与对比度比值（L = 0.2126*R + 0.7152*G + 0.0722*B），并给出 AA/AAA 普通文本与大号文本的通过判定；
2. check_color_blind_safety(colors)：模拟三种色觉缺陷（deuteranopia 红绿、protanopia 红绿偏移、tritanopia 蓝黄）的色相混淆区间，标记可能无法区分的颜色对；饱和度 <0.15 的灰色与明度差 >0.3 的配对会被豁免；
3. validate_palette(playbook) / validate_accessibility(playbook)：批量检查主文本/背景、muted 文本、overlay 文本/背景的对比度，并对 primary + accent + chart_palette 做色盲安全检查，最终输出 pass、error_count、warning_count 与明细。

此外 generate_harmony(base_hex, harmony_type) 提供基于 HSL 的配色和谐生成（互补、邻近、三角、分裂互补四种），compute_type_scale() 提供模块化字号缩放（支持 minor_second 1.067 到 golden 1.618 六档比例）。

八、常见陷阱：误导性图表、动画失误与设计失误

8.1 误导性图表

陷阱	为什么误导	修复
Y 轴截断（不从 0 开始）	微小差异被放大成巨大差异	条形图 Y 轴永远从 0 开始
3D 图表	透视扭曲了大小感知	一律使用 2D 平面图表
不同量纲的双 Y 轴	暗示虚假的相关性	用两张并排图替代
掐头去尾的时间范围	隐藏更广的上下文	展示完整相关范围或明示截断
扇区过多的饼图	小角度无法比较	最多 5~6 片，其余聚合

8.2 动画失误

陷阱	修复
动画过快（<1.5s）	观众跟不上出现的内容。构建动画至少 2 秒
动画后无停留	场景在图表可读前就被切走。至少停留 3~5 秒
所有元素同时出现	失去叙事节奏。错峰入场
无意义弹跳/旋转	分散数据注意力。按 Playbook 使用干净的 ease-in-out

8.3 设计失误

陷阱	修复
单图颜色过多（>5 种）	限制在 4~5 种以内，聚合或拆分图表
缺标题	每张图表都需要标题，观众没有其他上下文
移动端字号过小	强制执行底线：1080p 下标题 32px、标签 24px
装饰性网格线	使用浅色网格线或干脆不用，网格线应为辅助阅读而非装饰
深色文字配深色背景	使用 Playbook 文字色配 Playbook 背景色，并检查对比度

九、与场景导演的集成：把设计规范落进 JSON 场景

技能文档最后给出了数据可视化技能在 OpenMontage 工作流中的接入方式：当场景导演识别出数据可视化需求时，按以下五步应用本技能：

1. 用上面的决策树确定图表类型；
2. 在场景的 movement 字段中指定动画模式（如 "build-up: bars grow from baseline over 2s, hold 4s"）；
3. 在 overlay_notes 中写明标签规格（如 "value labels above bars, title top-left, source bottom-right"）；
4. 在 required_assets 描述中引用 Playbook 颜色（如 "bar chart using primary[0] #2563EB for main bars, accent[0] #F59E0B for highlight bar"）；
5. 设置场景时长 = 动画（2~4s）+ 停留（3~5s）= 每个图表场景至少 5 秒。

9.1 示例场景规格（可直接复用）

技能文档给出的完整 JSON 示例值得完整保留，它演示了所有规范如何落进一个真实场景：

{
  "id": "scene-7",
  "type": "animation",
  "description": "Horizontal bar chart comparing response times: Traditional DB 450ms, Vector DB 12ms, Cached 3ms. Bars grow left-to-right with stagger. Vector DB bar highlighted in accent color. Hold for readability.",
  "start_seconds": 32,
  "end_seconds": 40,
  "script_section_id": "s5",
  "framing": "full-screen chart, centered with generous padding",
  "movement": "build-up: bars grow from left over 2.5s with 0.3s stagger, hold 5s",
  "transition_in": "fade",
  "transition_out": "dissolve",
  "overlay_notes": "Title: 'Query Response Time Comparison'. Value labels right of bars (ms units). Source: 'Benchmark 2024' bottom-right 16px. Vector DB bar uses accent[0], others use primary[0] at 50% opacity.",
  "required_assets": [
    {
      "type": "chart_data",
      "description": "Horizontal bar chart data: Traditional DB 450ms, Vector DB 12ms, Cached 3ms. Use playbook primary #2563EB at 50% for context bars, accent #F59E0B for Vector DB highlight bar.",
      "source": "generate"
    }
  ]
}

这个示例浓缩了前文的全部规范：决策树选型（3 个数据点、排名/对比 → 水平条形图）、动画编排（build-up + 0.3s 错峰 + 5s 停留）、标签放置（数值标签在条右侧、标题置顶、来源右下 16px）、色彩纪律（primary 50% 透明度做背景条、accent 全饱和做高亮条）。movement、overlay_notes、required_assets 三个字段正是场景导演消费本技能的标准入口。

十、交付前质量清单

技能文档以一份 12 项检查清单收尾，这也是每个数据可视化场景交付前的最终门禁：

• [ ] 图表类型与数据叙事匹配（而不是"默认用条形图"）
• [ ] 数据点数量在限制内：条形 5~7 根、饼图 3~5 片、折线 5~12 个点
• [ ] 动画时长达标：构建至少 2~4s，停留至少 3~5s
• [ ] 所有文字满足字号底线：1080p 下标题 32px、标签 24px
• [ ] 颜色从当前 Playbook 调色板派生
• [ ] 关键数据点有视觉强调（高亮色、缩放或批注）
• [ ] 不单纯依赖颜色传义（标签 + 纹理保证可访问性）
• [ ] 条形图 Y 轴从 0 开始
• [ ] 无 3D 效果或透视扭曲
• [ ] 标题可见且具描述性
• [ ] 使用外部数据时注明来源
• [ ] 停留期间任意一帧暂停时图表均可读

延伸阅读

• 技能文档原文：skills/creative/data-visualization.md
• 图表生成工具实现：tools/graphics/diagram_gen.py
• Remotion 图表组件：remotion-composer/src/components/charts/BarChart.tsx、LineChart.tsx、KPIGrid.tsx
• Playbook 加载与可访问性校验：styles/playbook_loader.py、schemas/styles/playbook.schema.json
• 预置样式示例：styles/clean-professional.yaml
• Remotion 合成引擎路由：skills/core/remotion.md
• 相关设计技能：skills/creative/typography.md、skills/creative/enhancement-strategy.md