OpenMontage 视频数据可视化实战指南从图表选型到 Remotion 动效落地【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage本指南围绕 OpenMontage 开源视频生产系统中skills/creative/data-visualization.md技能文档展开系统讲解在视频场景中如何把统计数据、对比、趋势、构成与关键指标转化为清晰、准确、有冲击力的可视化画面并覆盖图表类型决策、动画编排、标签布局、数据密度、色彩纪律与可访问性六条主线。读完本文你将掌握一套可直接套用的图表选型决策树、三种标准动画叙事模式、1080p 字号与对比度底线以及如何将图表设计无缝接入场景导演Scene Director的 JSON 场景规格。一、技能定位什么时候调用数据可视化在 OpenMontage 的 Agent 技能体系中data-visualization属于skills/creative/目录下的创作类技能其兄弟技能还包括 video-editing.md、storytelling.md、data-visualization.md 等。它的触发条件是某个场景需要以视觉形式呈现数据——统计数据、对比、趋势、构成比例或关键指标。该技能回答四个核心问题该用哪种图表——由图表类型决策树决定图表怎么动起来——由动画编排三模式与计时规则决定标签放哪里字号多大——由标签放置规则与数据密度 vs 可读性决定颜色怎么取——由从 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_genMermaid 优先、Pillow 兜底在源码 tools/graphics/diagram_gen.py 中diagram_gen工具被实现为DiagramGen类继承自BaseTool其输入模式input_schema支持三种diagram_typemermaid直接渲染 Mermaid 语法优先调用mmdcMermaid CLI支持themedark/light/neutral默认dark、width默认 1200、height默认 800等参数渲染时以-b transparent输出透明背景便于后续合成flowchart/boxes使用 Pillow 绘制方框箭头图支持boxeslabelcolor、connectionsfrom/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 point4.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-up2~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.13s30fps与技能文档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 40x 轴下方字号分别为 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.1Y 轴始终从 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 values5.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.2M6.2 字号底线1080p 基准不可妥协元素最小值推荐值图表标题32px36~40px坐标轴标签24px28px数值标签24px28px批注20px24px来源引用16px18px缩放规则4K 输出全部乘以 2 倍720p 输出仍适用以上下限这是地板不是天花板。OpenMontage 的 Playbook 校验层将这一标准固化为可执行代码在 styles/playbook_loader.py 中定义了MIN_VIDEO_BODY_SIZE_PX 24validate_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% opacitychart_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_typecomplementary/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 color7.3 可访问性规则绝不只用颜色传义叠加纹理条形/扇区上使用剖面线、点阵或条纹与颜色并用必配标签每根柱、每个扇区、每条线都要有文字标签不能只依赖图例对比度相邻图表元素之间最小 3:1色盲安全避免红绿作为唯一区分手段表达正负对比时优先蓝橙或蓝黄配对。OpenMontage 在 styles/playbook_loader.py 中内置了完整的可访问性工具链可做三层自动校验validate_contrast(fg, bg)按 WCAG 2.1 计算相对亮度与对比度比值L 0.2126*R 0.7152*G 0.0722*B并给出 AA/AAA 普通文本与大号文本的通过判定check_color_blind_safety(colors)模拟三种色觉缺陷deuteranopia 红绿、protanopia 红绿偏移、tritanopia 蓝黄的色相混淆区间标记可能无法区分的颜色对饱和度 0.15 的灰色与明度差 0.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_second1.067 到golden1.618 六档比例。八、常见陷阱误导性图表、动画失误与设计失误8.1 误导性图表陷阱为什么误导修复Y 轴截断不从 0 开始微小差异被放大成巨大差异条形图 Y 轴永远从 0 开始3D 图表透视扭曲了大小感知一律使用 2D 平面图表不同量纲的双 Y 轴暗示虚假的相关性用两张并排图替代掐头去尾的时间范围隐藏更广的上下文展示完整相关范围或明示截断扇区过多的饼图小角度无法比较最多 5~6 片其余聚合8.2 动画失误陷阱修复动画过快1.5s观众跟不上出现的内容。构建动画至少 2 秒动画后无停留场景在图表可读前就被切走。至少停留 3~5 秒所有元素同时出现失去叙事节奏。错峰入场无意义弹跳/旋转分散数据注意力。按 Playbook 使用干净的 ease-in-out8.3 设计失误陷阱修复单图颜色过多5 种限制在 4~5 种以内聚合或拆分图表缺标题每张图表都需要标题观众没有其他上下文移动端字号过小强制执行底线1080p 下标题 32px、标签 24px装饰性网格线使用浅色网格线或干脆不用网格线应为辅助阅读而非装饰深色文字配深色背景使用 Playbook 文字色配 Playbook 背景色并检查对比度九、与场景导演的集成把设计规范落进 JSON 场景技能文档最后给出了数据可视化技能在 OpenMontage 工作流中的接入方式当场景导演识别出数据可视化需求时按以下五步应用本技能用上面的决策树确定图表类型在场景的movement字段中指定动画模式如build-up: bars grow from baseline over 2s, hold 4s在overlay_notes中写明标签规格如value labels above bars, title top-left, source bottom-right在required_assets描述中引用 Playbook 颜色如bar chart using primary[0] #2563EB for main bars, accent[0] #F59E0B for highlight bar设置场景时长 动画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.pyRemotion 图表组件remotion-composer/src/components/charts/BarChart.tsx、LineChart.tsx、KPIGrid.tsxPlaybook 加载与可访问性校验styles/playbook_loader.py、schemas/styles/playbook.schema.json预置样式示例styles/clean-professional.yamlRemotion 合成引擎路由skills/core/remotion.md相关设计技能skills/creative/typography.md、skills/creative/enhancement-strategy.md【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
OpenMontage 视频数据可视化实战指南：从图表选型到 Remotion 动效落地
OpenMontage 视频数据可视化实战指南从图表选型到 Remotion 动效落地【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage本指南围绕 OpenMontage 开源视频生产系统中skills/creative/data-visualization.md技能文档展开系统讲解在视频场景中如何把统计数据、对比、趋势、构成与关键指标转化为清晰、准确、有冲击力的可视化画面并覆盖图表类型决策、动画编排、标签布局、数据密度、色彩纪律与可访问性六条主线。读完本文你将掌握一套可直接套用的图表选型决策树、三种标准动画叙事模式、1080p 字号与对比度底线以及如何将图表设计无缝接入场景导演Scene Director的 JSON 场景规格。一、技能定位什么时候调用数据可视化在 OpenMontage 的 Agent 技能体系中data-visualization属于skills/creative/目录下的创作类技能其兄弟技能还包括 video-editing.md、storytelling.md、data-visualization.md 等。它的触发条件是某个场景需要以视觉形式呈现数据——统计数据、对比、趋势、构成比例或关键指标。该技能回答四个核心问题该用哪种图表——由图表类型决策树决定图表怎么动起来——由动画编排三模式与计时规则决定标签放哪里字号多大——由标签放置规则与数据密度 vs 可读性决定颜色怎么取——由从 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_genMermaid 优先、Pillow 兜底在源码 tools/graphics/diagram_gen.py 中diagram_gen工具被实现为DiagramGen类继承自BaseTool其输入模式input_schema支持三种diagram_typemermaid直接渲染 Mermaid 语法优先调用mmdcMermaid CLI支持themedark/light/neutral默认dark、width默认 1200、height默认 800等参数渲染时以-b transparent输出透明背景便于后续合成flowchart/boxes使用 Pillow 绘制方框箭头图支持boxeslabelcolor、connectionsfrom/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 point4.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-up2~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.13s30fps与技能文档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 40x 轴下方字号分别为 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.1Y 轴始终从 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 values5.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.2M6.2 字号底线1080p 基准不可妥协元素最小值推荐值图表标题32px36~40px坐标轴标签24px28px数值标签24px28px批注20px24px来源引用16px18px缩放规则4K 输出全部乘以 2 倍720p 输出仍适用以上下限这是地板不是天花板。OpenMontage 的 Playbook 校验层将这一标准固化为可执行代码在 styles/playbook_loader.py 中定义了MIN_VIDEO_BODY_SIZE_PX 24validate_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% opacitychart_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_typecomplementary/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 color7.3 可访问性规则绝不只用颜色传义叠加纹理条形/扇区上使用剖面线、点阵或条纹与颜色并用必配标签每根柱、每个扇区、每条线都要有文字标签不能只依赖图例对比度相邻图表元素之间最小 3:1色盲安全避免红绿作为唯一区分手段表达正负对比时优先蓝橙或蓝黄配对。OpenMontage 在 styles/playbook_loader.py 中内置了完整的可访问性工具链可做三层自动校验validate_contrast(fg, bg)按 WCAG 2.1 计算相对亮度与对比度比值L 0.2126*R 0.7152*G 0.0722*B并给出 AA/AAA 普通文本与大号文本的通过判定check_color_blind_safety(colors)模拟三种色觉缺陷deuteranopia 红绿、protanopia 红绿偏移、tritanopia 蓝黄的色相混淆区间标记可能无法区分的颜色对饱和度 0.15 的灰色与明度差 0.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_second1.067 到golden1.618 六档比例。八、常见陷阱误导性图表、动画失误与设计失误8.1 误导性图表陷阱为什么误导修复Y 轴截断不从 0 开始微小差异被放大成巨大差异条形图 Y 轴永远从 0 开始3D 图表透视扭曲了大小感知一律使用 2D 平面图表不同量纲的双 Y 轴暗示虚假的相关性用两张并排图替代掐头去尾的时间范围隐藏更广的上下文展示完整相关范围或明示截断扇区过多的饼图小角度无法比较最多 5~6 片其余聚合8.2 动画失误陷阱修复动画过快1.5s观众跟不上出现的内容。构建动画至少 2 秒动画后无停留场景在图表可读前就被切走。至少停留 3~5 秒所有元素同时出现失去叙事节奏。错峰入场无意义弹跳/旋转分散数据注意力。按 Playbook 使用干净的 ease-in-out8.3 设计失误陷阱修复单图颜色过多5 种限制在 4~5 种以内聚合或拆分图表缺标题每张图表都需要标题观众没有其他上下文移动端字号过小强制执行底线1080p 下标题 32px、标签 24px装饰性网格线使用浅色网格线或干脆不用网格线应为辅助阅读而非装饰深色文字配深色背景使用 Playbook 文字色配 Playbook 背景色并检查对比度九、与场景导演的集成把设计规范落进 JSON 场景技能文档最后给出了数据可视化技能在 OpenMontage 工作流中的接入方式当场景导演识别出数据可视化需求时按以下五步应用本技能用上面的决策树确定图表类型在场景的movement字段中指定动画模式如build-up: bars grow from baseline over 2s, hold 4s在overlay_notes中写明标签规格如value labels above bars, title top-left, source bottom-right在required_assets描述中引用 Playbook 颜色如bar chart using primary[0] #2563EB for main bars, accent[0] #F59E0B for highlight bar设置场景时长 动画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.pyRemotion 图表组件remotion-composer/src/components/charts/BarChart.tsx、LineChart.tsx、KPIGrid.tsxPlaybook 加载与可访问性校验styles/playbook_loader.py、schemas/styles/playbook.schema.json预置样式示例styles/clean-professional.yamlRemotion 合成引擎路由skills/core/remotion.md相关设计技能skills/creative/typography.md、skills/creative/enhancement-strategy.md【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
