概览
为AI生成的图表带来丰富的交互性:Flint-interactive使代理能够创建数据可视化,用户可通过点击、过滤、缩放、高亮以及跨图表交互直接进行探索。
让复杂交互更易于构建:Flint-interactive无需编写底层可视化代码,而是让用户和代理使用高级语义事件和更新操作符来定义行为。
提高可靠性并减少开发工作量:通过使用Flint的编译器处理交互逻辑和视觉依赖,该系统有助于避免自定义交互式可视化中常见的布局、渲染和调试挑战。
连接图表、文本、表格和应用:Flint-interactive支持交互式数据故事、仪表板和互联体验,其中一个视图中的操作可以更新另一个视图中的图表、文档、小部件或应用状态。
AI代理使分析数据并生成带有数据可视化的报告变得容易。它们帮助用户比阅读冗长文本更高效地检查模式。然而,当我们想要进行探索时,我们希望超越静态可视化:我们希望与图表交互以放大细节、跨图表比较数据,甚至从图表选择中高亮文档中的相关文本,反之亦然。这要求代理能够创建交互式数据可视化,在传达信息的同时让读者探索超出作者选定视图的内容,理想情况下达到复杂数据新闻中交互式故事的品质。这让我们不禁思考:
(作为用户)我能否直接在聊天中与图表交互以探索数据,并根据我的选择提出后续问题?
(作为开发者)我能否让我为客户构建的AI代理生成交互式可视化,帮助他们探索和理解数据?
是的,这是可能的,但存在显著的实际差距。即使有能力强大的前沿模型,我们仍然面临:
高生成成本。代理很少能在一轮中生成完全令人满意的交互式可视化。反复的推理、编码和调试会消耗令牌和时间。
可靠性。交互式可视化本身就具有挑战性,表达性的交互式图表很容易引入糟糕的布局或损坏的交互,而在尝试修复时我们又可能引入新问题。
这些挑战有助于解释为什么在实际使用中持续生成高质量的交互式可视化仍然困难。与此同时,某些可视化库中的内置交互本身表达能力不足,无法创建定制的交互式图表。而这些挑战正是由于缺乏一种既表达力强又高级的语言来指定视觉交互所导致的。
视频系列
On Second Thought
由Sinead Bovell打造的视频系列,围绕每个人都在询问的关于AI的问题展开。借助微软各地的专家声音,我们剖析这项快速变化技术中的张力与承诺,探索正在演进的内容以及可能实现的未来。
探索该系列
Flint-interactive
Flint-interactive是一种在Flint之上创建交互式数据可视化的语言。它让用户更容易创建仪表板、数据故事和交互式制品。Flint-interactive的强大之处来自Flint的编译器,它将用户交互转化为捕获用户选择背后含义的语义事件。然后它使用高级操作符根据这些事件更新可视化,使复杂交互的创建和维护变得容易得多。这将解决交互与视觉逻辑之间复杂依赖的沉重负担转移给编译器,因此用户(或代理)可以用高级规范轻松描述富有表现力的交互。
示例 1:我们可以让用户刷选一个可视化视图,图表会通过简单的预设交互 linked-brush 高亮显示用户选择的所有国家分组。
如何使用
- 在聊天中使用 Flint
通过 Flint-MCP 和 MCP Apps,按照 MCP 设置指南,直接在聊天或画布环境中使用 Flint Interactive。在最新版本中,告诉你的智能体要绘制什么图表以及想要哪些交互;它可以生成 interaction_spec 以及 Flint 图表规范,并在你的对话中渲染交互式图表。
示例 2:在聊天环境中使用 Flint-interactive,使智能体能够更可靠地使用简单的 Flint 规范生成交互式图表。它还允许用户选择并将上下文传递到后续对话轮次。
- 使用 Flint 构建交互式应用
使用 Flint Interactive Canvas 在仪表板、数据故事或其他应用程序中构建交互式图表。你的应用可以使用事件处理程序来处理 Flint Canvas 发出的语义事件,例如过滤表格、更新另一个图表或更改应用程序状态。为了让应用的小部件控制图表的更新方式,向 Flint Canvas 发送更新操作符。
示例 2:Flint-interactive 允许开发者定义图表与外部元素(例如表格、段落)之间的交互。在这里,用户可以点击表格来高亮图表中的点,反之亦然。
- 创建定制交互
要创建超出 Flint 预设的定制交互,使用编程 API 定义触发器和自定义处理函数,该函数将语义事件映射到自定义图表更新序列。例如,处理程序可以高亮点击的国家并按其名称标注。它结合了 set-style 和 set-annotation,而无需操作渲染器特定的标记。
示例 4:智能体可以使用 Flint 的编程 API 创建定制交互可视化。在这个 DimpVis 示例中,用户可以沿着时间路径拖动点,以可视化所有城市的温度和降水如何变化。
工作原理
Flint Canvas 是一个状态机,跟踪画布上的用户交互并管理视觉渲染状态。Flint 通过将视觉逻辑(由编译器管理)与交互逻辑(由用户在语义层面指定)分离,使交互规范变得容易:
视觉逻辑:编译器自动将原始触发器(如点击、拖动和按键)解析为识别图表元素和数据的语义事件。它还将更新操作符转换为渲染的画布更改,处理命中测试和低级视觉更新。
交互逻辑:用户通过将语义交互事件映射到图表更新操作符来指定交互,例如 set style 以高亮数据、set annotation 以标注点,或 set viewport 以平移或缩放。用户还可以使用这些语义事件来更新外部表格、小部件或应用程序状态。
图 1:Flint interactive 允许智能体通过将“用户正在与什么语义事件交互”映射到“他们希望对画布表面进行什么更新”来描述交互逻辑。编译器承担了解析视觉更新和管理运行时的繁重工作,这使得交互创作更加可靠且成本效益高。
这种分离意味着用户无需逆向工程渲染逻辑或操作渲染器特定的标记,从而使交互更容易指定和维护。此外,由于事件生成和视觉更新是组合式的,同一模型还可以将 Flint 与表格、文本、其他图表和小部件连接起来,以构建交互式故事和仪表板。
立即尝试!
图表用户:在聊天中设置 Flint 并要求你的智能体创建交互式图表。在交互画廊中寻找灵感。
应用构建者:使用编程 API 构建交互式仪表板、数据故事和连接视图。与你的编码智能体分享 interaction-author skill,以向你的应用添加预设。
交互设计师:探索定制示例,设计新的交互,并将其转化为可重用的预设。在 GitHub 上提出预设,并分享您的原型或实现,以帮助扩展 Flint 的交互词汇。
文章《Flint-interactive:一种创建交互式数据可视化的语言》最先发表于 Microsoft Research。
