微软发布 Flint-interactive 简化 AI 数据可视化交互开发

概览

• 为 AI 生成的图表带来丰富的交互性：Flint-interactive 使智能体（agents）能够创建数据可视化内容，用户可以直接通过点击、筛选、缩放、高亮以及跨图表交互来探索这些数据。
• 简化复杂交互的构建过程：无需编写底层的可视化代码，Flint-interactive 允许用户和智能体通过高层语义事件和更新操作符来定义行为。
• 提高可靠性并减少开发工作量：利用 Flint 编译器处理交互逻辑和视觉依赖关系，该系统有助于避免自定义交互式可视化中常见的布局、渲染和调试难题。
• 连接图表、文本、表格和应用：Flint-interactive 支持交互式数据故事、仪表板以及联动体验，其中一个视图中的操作可以更新另一个视图中的图表、文档、小部件或应用状态。

AI 智能体使得分析数据和生成包含数据可视化的报告变得轻而易举。相比阅读冗长的文本，它们能帮助用户更高效地审视数据模式。然而，当我们处于探索模式时，往往不满足于静态可视化：我们希望与图表进行交互，以便放大细节、跨图表比较数据，甚至通过图表选择来高亮文档中的相关文本，反之亦然。这要求智能体能够创建交互式数据可视化，在传达信息的同时，让读者超越作者预设的视角进行探索，理想情况下应具备 sophisticated data journalism（高级数据新闻）中交互式故事的质感。这让我们不禁思考：

• （作为用户）我能否直接在聊天中与图表交互，以探索数据并根据我的选择提出后续问题？
• （作为开发者）我能否让我为客户构建的 AI 智能体生成交互式可视化，从而帮助他们探索和理解其数据？

答案是肯定的，但这中间存在巨大的实际差距。即使拥有强大的前沿模型（frontier models），我们仍然面临：

• 生成成本高。Agent 很少能在单轮对话中产出完全令人满意的交互式可视化。反复进行的推理、编码和调试会消耗大量 token 和时间。
• 可靠性问题。交互式可视化的实现难度较大，富有表现力的交互图表很容易出现布局混乱或交互失效的情况，而在尝试修复这些问题时又可能引入新的故障。

这些挑战解释了为何在真实应用场景中，持续生成高质量的交互式可视化仍然困难重重。与此同时，某些可视化库内置的交互功能本身不够丰富，无法独立构建定制化的交互图表。而这些挑战的根本原因，在于缺乏一种既具备高表达力又保持高层抽象的语言来定义视觉交互。

Flint-interactive

Flint-interactive（在新标签页中打开） 是建立在 Flint 之上的一种用于创建交互式数据可视化的语言。它让用户能够更轻松地构建仪表盘、数据故事和交互式工件。Flint-interactive 的强大之处源于 Flint 编译器，该编译器能将用户交互转化为语义事件，从而捕捉用户选择背后的含义。随后，它利用高层算子根据这些事件更新可视化内容，使得复杂交互的创建与维护变得更加容易。这将解决交互逻辑与视觉逻辑之间复杂依赖关系的沉重负担转移给了编译器，因此用户（或 Agent）可以通过高层规范轻松描述富有表现力的交互。

示例 1：我们可以启用用户刷选（brush）某个可视化视图的功能，并通过简单的预设交互 linked-brush，让图表高亮显示用户所选的所有国家分组。

如何使用

1. 在聊天中使用 Flint

通过 Flint-MCP 和 MCP Apps，你可以直接在聊天或画布环境中使用 Flint Interactive，具体操作请参照 MCP 设置指南。借助最新版本，你只需告诉智能体要绘制什么图表以及希望实现哪些交互；它就能在生成 Flint 图表规范的同时，生成一个 interaction_spec，并在你的对话中渲染出交互式图表。

示例 2：在聊天环境中使用 Flint-interactive，使智能体能够基于简单的 Flint 规范更可靠地生成交互式图表。此外，它还允许用户选择并将上下文传递给后续轮次。

2. 使用 Flint 构建交互式应用

利用 Flint Interactive Canvas，你可以在仪表盘、数据故事或其他应用中构建交互式图表。你的应用可以使用事件处理程序来处理由 Flint Canvas 发出的语义事件，例如过滤表格、更新另一个图表或更改应用状态。为了让应用的控件决定图表如何更新，可以向 Flint Canvas 发送更新算子（update operators）。

示例 2：Flint-interactive 允许开发者定义图表与外部元素（如表格、段落）之间的交互。在此例中，用户可以点击表格以高亮图表中的点，反之亦然。

3. 创建定制交互

要创建超越 Flint 预设功能的定制交互，请通过编程 API 定义触发器（trigger）和自定义处理函数（handle function），将语义事件映射到自定义的图表更新序列。例如，处理程序可以高亮显示被点击的国家并为其添加名称标签。该操作结合了 set-style 和 set-annotation，而无需直接操作特定于渲染器的标记（marks）。

示例 4：智能体可以利用 Flint 的编程 API 创建定制的交互式可视化。在这个 DimpVis 示例中，用户可以沿时间路径拖动数据点，以可视化所有城市温度和降水量的变化。

工作原理

Flint Canvas 是一个状态机，用于跟踪画布上的用户交互并管理视觉渲染状态。Flint 通过将视觉逻辑（由编译器管理）与交互逻辑（由用户在语义层面指定）分离，简化了交互规范的制定：

• 视觉逻辑：编译器自动将原始触发器（如点击、拖拽和按键）解析为识别图表元素和数据的语义事件。它还将更新运算符转换为渲染后的画布变更，处理命中测试（hit testing）和低级别的视觉更新。
• 交互逻辑：用户通过建立语义交互事件与图表更新运算符之间的映射来指定交互行为，例如使用 set style 高亮显示数据、使用 set annotation 为数据点添加标签，或使用 set viewport 进行平移或缩放。用户还可以利用这些语义事件来更新外部表格、小部件（widgets）或应用程序状态。

图 1：Flint Interactive 允许智能体通过映射“用户正在交互的语义事件”与“他们希望画布表面进行的更新”来描述交互逻辑。编译器承担了视觉更新解析和运行时管理的繁重工作，从而使交互编写更加可靠且经济高效。

这种分离意味着用户无需逆向工程渲染逻辑或操作特定于渲染器的标记，使得交互更容易指定和维护。此外，由于事件生成和视觉更新具有组合性，同一模型还将 Flint 与表格、文本、其他图表和小部件连接起来，以构建交互式故事和仪表板。

立即试用！

图表用户： 在你的聊天中设置 Flint（在新标签页中打开），并要求你的智能体创建一个交互式图表。在交互画廊中寻找灵感。

应用开发者： 使用 编程 API（在新标签页中打开） 构建交互式仪表板、数据故事和关联视图。将 interaction-author 技能分享给你的编码智能体，以便为你的应用添加预设。

交互设计师： 探索 定制示例（在新标签页中打开），设计新的交互并将其转化为可复用的预设。在 GitHub 上提出预设建议，并分享你的原型或实现，以帮助扩展 Flint 的交互词汇库。

在新标签页中打开

文章 Flint-interactive: A language for creating interactive data visualizations 首发于 Microsoft Research。