看着
- 带来丰富的交互到AI生成的图表：Flint-interactive使agents能够创建数据可视化，用户可以通过点击，过滤，缩放，突出显示，以及跨图交互来直接探索。
- 使复杂的交互更容易构建：Flint交互让用户和agents使用高级语义事件定义行为并更新操作员，而不是要求低级可视化代码。
- 提高可靠性并减少开发努力：通过使用弗林特的编译器处理交互逻辑和视觉依赖性，系统帮助避免了许多自定义交互可视化中常见的布局，渲染，调试挑战。
- 连接图表、文本、表格和应用程序：Flint-interactive支持交互式数据故事、仪表板和连接的经验，其中一个视图中的行动可以更新图表、文档、部件或另一个应用程序状态。
AI agents方便地分析数据，并以数据可视化生成报告。 它们帮助用户比阅读动词文本更高效地检查模式。 但当我们感到探索性时，我们希望在细节上与图表到 zoom 交互，在图表之间进行比较数据，甚至从图表选择中突出文档中的相关文本，反之亦然。 这要求agents能够创建交互式数据可视化，在传递信息的同时让读者在作者所选择的视野之外进行探索，理想的是在精密的数据新闻中互动故事的质量。 这让我们怀疑：
- (作为一个用户)我可以在聊天中直接与图表交互，探索数据，并根据我所选择的内容提出后续问题吗？
我能允许我为我的客户建造的AI agents生成交互式可视化，帮助他们探索和理解他们的数据吗？
是的，这是有可能的，但实际差距很大。 即使有了有能力的前沿模型，我们仍然面临：
- 发电成本很高。 Agents很少一次产生完全令人满意的交互式可视化。 反复的推理，编码，调试等回合会消耗符和时间。
- 可靠性。 互动可视化具有足够的挑战性，表现式互动图可以很容易地引入糟糕的布局或中断的相互作用，我们在试图修复时可能会引入新的问题。
这些挑战有助于解释为什么在现实世界中始终难以产生高质量的互动视觉。 同时，一些可视化图书馆的内置交互功能本身不够表现力，无法创建有声互动图。 这些挑战是缺乏一种表达性但又高层次的语言来指定视觉互动的结果。
视频系列
弗林特互动
弗林特互动(英語：opens in new tab)是一种在弗林特顶部创建交互式数据可视化语言。 它可以让用户更容易地创建仪表板，数据故事，和交互式文物。 Flint-interactive的力量来自Flint的编译器，该编译器将用户交互转化为语义事件，捕捉到用户选择内容背后的意义。 然后，它利用高级操作器来更新可视化以应对这些事件，使得复杂的交互更便于创建和维护。 这把解决相互作用和视觉逻辑之间的复杂依赖性的沉重负担转移给编译器，因此用户(或agent)可以轻松地描述与高规格的表达式相互作用。
如何使用
1. 在聊天时使用弗林特语
通过Flint-MCP和MCP Apps在您的聊天或canvas环境中直接使用Flint Interactive，遵循MCP设置指南。 使用最新版本，告诉您的 agent 要绘制什么和您想要哪些互动；它可以在 Flint 图表光谱的同时生成一个交互 spec，并在您的谈话中渲染交互图表。
2. 与弗林特建立互动应用程序
在仪表板中构建交互式图表，数据故事，或与弗林特互动Canvas的其他应用程序。 您的应用程序可以使用事件处理器处理 Flint Canvas 发布的语义事件，例如过滤一个表格，更新另一个图表，或更改应用程序状态。 要让您的应用程序部件控制图表的更新，请向 Flint Canvas 发送更新操作员。
3. 建立有发言权的互动关系
要在弗林特的预设之外创建标语交互，用将语义事件映射到自定义图表更新序列的编程API来定义触发器和自定义控件功能。 例如，一个处理器可以突出显示一个被点击的国家并用名称给它贴上标签。 它在不操纵渲染器特定标记的情况下，将设定样式和设定注释相结合。
如何运作
Flint Canvas是一台状态机器，可以跟踪canvas上的用户交互，管理视觉渲染状态。 Flint通过将编译器管理的视觉逻辑与用户在语义层面指定的交互逻辑区分开来，使交互规格变得容易：
- 视觉逻辑：编译器会自动解析原始触发器，如点击，拖动，和按键压入语义事件，以识别图表元素和数据。 它还将更新操作员翻译为渲染的canvas更改，处理命中测试，以及低级视觉更新。
- 交互逻辑：用户通过映射语义交互事件来指定交互，以图表更新运算符，例如设置样式以突出数据，设置注释以标记一个点，或者设置视图端口以泛或zoom. 用户还可以使用这些语义事件来更新外部表格，部件，或应用程序状态。
这种分离意味着用户不需要逆向-引擎渲染逻辑或操纵渲染器特定标记，使得相互作用更容易指定和维护。 此外，由于事件生成和视觉更新是构成性的，同一模式还将弗林特与表格，文本，其他图表，部件连接起来，以构建交互式故事和仪表板。
试试看！
图表用户：在聊天中设置弗林特(以新标签打开)，并要求您的 agent 创建交互图表。 在互动画廊中查找灵感。
App 构建器：构建交互式仪表板，数据故事，以及与编程API连接的视图(在新标签中打开). 与您的编码 agent 共享交互作者技能，在您的应用程序中添加预设。
交互设计者：探索铃声实例(在新标签中打开)，设计新的交互，并将其变成可重复使用的预设。 提议在 GitHub 上预设，并分享您的原型或执行，以帮助扩展 Flint 的交互词汇。
本文由 AI图鉴自动抓取并翻译，版权归原作者所有；如需查看原文请点下方链接。
At a glance
- Brings rich interactivity to AI-generated charts: Flint-interactive enables agents to create data visualizations that users can explore directly through clicking, filtering, zooming, highlighting, and cross-chart interactions.
- Makes complex interactions easier to build: Instead of requiring low-level visualization code, Flint-interactive lets users and agents define behaviors using high-level semantic events and update operators.
- Improves reliability and reduces development effort: By using Flint’s compiler to handle interaction logic and visual dependencies, the system helps avoid many of the layout, rendering, and debugging challenges common in custom interactive visualizations.
- Connects charts, text, tables, and applications: Flint-interactive supports interactive data stories, dashboards, and connected experiences where actions in one view can update charts, documents, widgets, or application state in another.
AI agents make it easy to analyze data and generate reports with data visualizations. They help users examine patterns more efficiently than by reading verbose text. However, when we’re feeling exploratory, we want to go beyond static visualizations.: We want to interact with charts to zoom in on details, compare data across charts, or even highlight related text in the document from a chart selection, and vice versa. This requires agents to be able to create interactive data visualizations that communicate information while letting readers explore beyond the author’s chosen view, ideally with the quality of interactive stories in sophisticated data journalism. This leaves us wondering:
- (As a user) Can I interact with charts directly in chat to explore the data and ask follow-up questions based on what I select?
- (As a developer) Can I enable the AI agents I build for my customers to generate interactive visualizations that help them explore and understand their data?
Yes, it’s possible, but there is a significant practical gap. Even with capable frontier models, we still face:
- High generation cost. Agents rarely produce a fully satisfactory interactive visualization in one turn. Repeated rounds of reasoning, coding, and debugging consume tokens and time.
- Reliability. Interactive visualizations are challenging enough that expressive interactive charts introduce poor layouts or broken interactions easily, and we risk introducing new problems when trying to fix them.
These challenges help explain why consistently generating high-quality interactive visualizations remain difficult in real-world use. Meanwhile, built-in interactions in some visualization libraries are not expressive enough on their own to create bespoke interactive charts. And these challenges are results of the lack of an expressive yet high-level language to specify visual interactions.
video series
Flint-interactive
Flint-interactive (opens in new tab) is a language for creating interactive data visualizations on top of Flint. It allows users to create dashboards, data stories, and interactive artifacts more easily. The power of Flint-interactive comes from Flint’s compiler, which translates user interactions into semantic events that capture the meaning behind what users select. It then uses high-level operators to update visualizations in response to those events, making sophisticated interactions far easier to create and maintain. This shifts the heavy burden of resolving complex dependencies between interaction and visual logic to the compiler, so the user (or the agent) can easily describe expressive interactions with high-level specifications.
How to use
1. Use Flint in your chat
Use Flint Interactive directly in your chat or canvas environment through Flint-MCP and MCP Apps, following the MCP setup guide. With the latest release, tell your agent what to chart and which interactions you want; it can generate an interaction_spec alongside the Flint chart spec and render the interactive chart in your conversation.
2. Build an interactive app with Flint
Build interactive charts in a dashboard, data story, or other application with Flint Interactive Canvas. Your app can use event handlers to process semantic events emitted by Flint Canvas, for example to filter a table, update another chart, or change application state. To let your app’s widgets control how the chart updates, send update operators to Flint Canvas.
3. Create bespoke interactions
To create bespoke interactions beyond Flint’s presets, define a trigger and a custom handle function with the programming API that maps semantic events to custom chart update sequences. For example, a handler can highlight a clicked country and label it by name. It combines set-style and set-annotation without manipulating renderer-specific marks.
How it works
Flint Canvas is a state machine that tracks user interactions on the canvas and manages visual rendering state. Flint makes interaction specification easy by separating visual logic, managed by the compiler, from interaction logic, specified by the user at the semantic level:
- Visual logic: The compiler automatically resolves raw triggers, such as clicks, drags, and key presses, into semantic events that identify chart elements and data. It also translates update operators into rendered canvas changes, handling hit testing, and low-level visual updates.
- Interaction logic: The user specifies interactions by mapping semantic interaction events to chart update operators, such as set style to highlight data, set annotation to label a point, or set viewport to pan or zoom. The user can also use those semantic events to update external tables, widgets, or application states.
This separation means users do not need to reverse-engineer rendering logic or manipulate renderer-specific marks, making interactions easier to specify and maintain. Furthermore, because event generation and visual updates are compositional, the same model also connects Flint with tables, text, other charts, and widgets to build interactive stories and dashboards.
Try it now!
Chart users: Set up Flint in your chat (opens in new tab) and ask your agent to create an interactive chart. Find inspiration in the interaction gallery.
App builders: Build interactive dashboards, data stories, and connected views with the programming API (opens in new tab). Share the interaction-author skill with your coding agent to add presets to your app.
Interaction designers: Explore the bespoke examples (opens in new tab), design a new interaction, and turn it into a reusable preset. Propose a preset on GitHub and share your prototype or implementation to help expand Flint’s interaction vocabulary.
Auto-fetched and translated by AI Atlas. All rights belong to the original author.