Microsoft Research 发布 Flint-interactive 交互式数据可视化语言

Flint Interactive flowchart | purple gradient background

概览

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

AI 智能体让分析数据和生成带有数据可视化的报告变得简单。它们帮助用户比阅读冗长文本更高效地考察数据模式。然而，当我们想要进行探索时，我们希望超越静态可视化。: 我们希望与图表交互以放大细节、跨图表比较数据，甚至通过图表选择高亮文档中的相关文本，反之亦然。这要求智能体能够创建交互式数据可视化，在传达信息的同时让读者探索超越作者所选视图的内容，理想情况下应达到精美数据新闻中交互式故事的水准。这让我们不禁思考：

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

答案是可行的，但目前存在巨大的实际差距。即使拥有强大的前沿模型，我们仍然面临：

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

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

聚焦：Microsoft Research 简报

Microsoft Research 简报

与 Microsoft 的研究社区保持联系。

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。

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

立即试用！

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

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

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