微软研究院发布 Flint-interactive，让智能体生成可交互数据可视化

Flint Interactive flowchart | purple gradient background

概览

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

AI 智能体让分析数据和生成带数据可视化的报告变得容易。它们能帮助用户比阅读冗长文本更高效地发现模式。然而，当我们想要探索时，我们希望超越静态可视化。：我们希望能与图表交互，以放大细节、跨图表比较数据，甚至通过图表选择高亮文档中的相关文本，反之亦然。这要求智能体能够创建交互式数据可视化，在传达信息的同时让读者超越作者选定的视角进行探索，最好还能达到复杂数据新闻中交互式故事的质量。这让我们不禁想问：

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

是的，这是可能的，但存在显著的实践差距。即使使用能力强的前沿模型，我们仍然面临：

高生成成本。智能体很少能在一轮内生成完全令人满意的交互式可视化。反复的推理、编码和调试会消耗 token 和时间。
可靠性。交互式可视化本身就足够具有挑战性，富有表现力的交互式图表很容易引入糟糕的布局或损坏的交互，而我们在尝试修复时又可能引入新问题。

这些挑战有助于解释为什么在现实世界中持续生成高质量的交互式可视化仍然困难。同时，一些可视化库中的内置交互本身表现力不足，无法创建定制的交互式图表。而这些挑战的根源在于缺乏一种既有表现力又高层的语言来指定视觉交互。

Flint-interactive

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

Interactive Gapminder visualization showing linked brushing across two scatterplots of countries in 1952 and 2007. Each plot charts GDP per capita on the horizontal axis and life expectancy on the vertical axis, with countries colored by continent. A blue rectangular selection highlights a group of countries in the 1952 chart, and the same countries are simultaneously highlighted in the 2007 chart, demonstrating linked selection across years. A control panel on the right provides interaction options including rectangular selection, lasso selection, and x- or y-axis brushing. The figure illustrates how selecting data points in one view highlights corresponding points in another view for comparative analysis over time. — 示例 1：我们可以让用户刷选一个可视化视图，图表通过一个简单的预设交互 linked-brush 高亮用户所选国家的所有分组。

如何使用

1. 在聊天中使用 Flint

按照 MCP 设置指南，通过 Flint-MCP 和 MCP Apps 直接在聊天或画布环境中使用 Flint Interactive。在最新版本中，告诉你的智能体要绘制什么图表以及想要哪些交互；它可以在生成 Flint 图表规范的同时生成 interaction_spec，并在对话中渲染交互式图表。

graphical user interface, chart — 示例 2：在聊天环境中使用 Flint-interactive，让智能体能够借助简单的 Flint 规范更可靠地生成交互式图表。它还使用户能够进行选择，并将上下文传递给后续轮次。

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

使用 Flint Interactive Canvas 在仪表板、数据故事或其他应用中构建交互式图表。你的应用可以使用事件处理器来处理 Flint Canvas 发出的语义事件，例如筛选表格、更新另一个图表或更改应用状态。要让应用的控件控制图表的更新方式，请向 Flint Canvas 发送更新算子。

Interactive Gapminder dashboard for 2007 showing a table of countries alongside a bubble chart comparing GDP per capita and life expectancy. In the table, the row for the United States is selected and highlighted, displaying GDP per person of $42,952 and life expectancy of 78.2 years. The corresponding bubble on the scatterplot is emphasized and labeled with a callout showing the same values. Countries are colored by continent, bubble size represents population, GDP per capita is shown on a logarithmic horizontal axis, and life expectancy is plotted on the vertical axis. The figure demonstrates external selection, where choosing a country in a table highlights and annotates the matching data point in the visualization. — 示例 2：Flint-interactive 允许开发者定义图表与外部元素（例如表格、段落）之间的交互。在这里，用户可以点击表格来高亮图表中的点，反之亦然。

3. 创建定制交互

要创建超出 Flint 预设范围的定制交互，请使用编程 API 定义触发器和自定义处理函数，将语义事件映射到自定义的图表更新序列。例如，处理器可以高亮被点击的国家并按名称标注它。它结合了 set-style 和 set-annotation，而无需操作特定于渲染器的标记。

Interactive climate visualization showing a seasonal phase portrait for five U.S. cities, with temperature (°C) on the horizontal axis and precipitation (mm/day) on the vertical axis. Seattle is selected, and its annual weather cycle is displayed as a connected path labeled by month from January through December. The path shows cool, wet conditions in winter, peaking near 6 mm/day of precipitation, and warmer, drier conditions in summer, with precipitation dropping below 1 mm/day. Colored points represent Chicago, Houston, Los Angeles, New York, and Seattle. A details panel on the right displays the selected month, January, with a temperature of 4.2°C and precipitation of 5.7 mm/day. The figure demonstrates temporal dragging and animation, where moving a city’s position along its seasonal path updates all cities to the corresponding time of year. — 示例 4：智能体可以使用 Flint 的编程 API 创建定制交互式可视化。在这个 DimpVis 示例中，用户可以沿时间路径拖动点，以可视化所有城市的温度和降水如何变化。

工作原理

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

视觉逻辑：编译器自动将原始触发器（如点击、拖动和按键）解析为标识图表元素和数据的语义事件。它还将更新算子转换为渲染后的画布变更，处理命中测试和底层视觉更新。
交互逻辑：用户通过将语义交互事件映射到图表更新操作符来指定交互，例如设置样式以高亮数据、设置标注以标记某个点，或设置视口以平移或缩放。用户还可以使用这些语义事件来更新外部表格、小组件或应用状态。

Figure: Flint interactive allows the agent to describe interaction logic by mapping “what semantic event is the user interacting with” to “what updates they want for the canvas surface”. The compiler takes the heavy lifting of resolving visual updates and manages the runtime, which makes interaction authoring more reliable and cost effective. — 图 1：Flint interactive 允许智能体通过将“用户正在交互的是什么语义事件”映射到“他们希望对画布表面进行哪些更新”来描述交互逻辑。编译器承担解析视觉更新的繁重工作并管理运行时，这使得交互编写更可靠c且更具成本效益。

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

立即试用！

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

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

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

在新标签页中打开

文章Flint-interactive：一种用于创建交互式数据可视化的语言首次发表于Microsoft Research。