Microsoft Research 推出 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：我们可以让用户在一个可视化视图中进行框选，图表便会通过一个简单的预设交互——联动框选——突出显示用户选中的所有国家组。

使用方法

1. 在聊天中使用 Flint

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

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。