Flint-interactive：建立互動式數據視覺化的語言

Flint Interactive flowchart | purple gradient background

一覽

為 AI 生成的圖表帶來豐富的互動功能：Flint-interactive 讓 Agent 建立數據視覺化，用戶可透過點擊、篩選、縮放、標示重點及跨圖表互動，直接探索數據。
讓複雜互動更易建立：Flint-interactive 不必依賴低階視覺化程式碼，用戶和 Agent 便可透過高階語義事件及更新運算子定義互動行為。
提升可靠性並減少開發工作：Flint-interactive 利用 Flint 編譯器處理互動邏輯和視覺相依關係，有助避免自訂互動視覺化常見的版面配置、算繪及除錯難題。
連結圖表、文字、表格和應用程式：Flint-interactive 支援互動式數據故事、儀錶板及互聯體驗，讓一個檢視中的操作可更新另一個檢視中的圖表、文件、小工具或應用程式狀態。

AI Agent 令數據分析及透過數據視覺化生成報告變得容易。相比閲讀冗長文字，它們有助用戶更有效率地檢視模式。然而，當我們想進一步探索時，便希望超越靜態視覺化。: 我們希望與圖表互動，放大查看細節、比較不同圖表中的數據，甚至根據圖表中的選取項目標示文件內的相關文字，反之亦然。這要求 Agent 能建立互動式數據視覺化，在傳達資訊的同時，讓讀者探索作者所選視圖以外的內容；理想情況下，效果媲美精緻數據新聞報道中的互動故事。這令我們不禁想問：

（作為用戶）我可否直接在對話中與圖表互動，探索數據，並根據所選內容提出後續問題？
（作為開發者）我可否讓為客戶開發的 AI Agent 生成互動式視覺化，協助客戶探索及理解數據？

可以，但實際應用仍存在明顯差距。即使有能力強大的前沿模型，我們仍面對以下問題：

生成成本高。Agent 很少能在一輪內生成完全令人滿意的互動式視覺化。反覆進行推理、編碼及除錯會消耗 Token 和時間。
可靠性。互動式視覺化本身已具挑戰性；表達力豐富的互動圖表容易出現欠佳的版面配置或失效的互動，而嘗試修復時亦可能引入新問題。

這些挑戰有助解釋為何在實際應用中，持續生成高質素互動式視覺化仍然困難。另一方面，某些視覺化程式庫的內置互動功能本身表達力不足，無法建立度身訂造的互動圖表。這些挑戰源於缺乏一種兼具表達力和高階特性的語言，以指定視覺互動。

Flint-interactive

Flint-interactive（在新分頁開啟）是一種建基於 Flint、用來建立互動式數據視覺化的語言。它讓用戶更輕鬆地建立儀錶板、數據故事和互動式作品。Flint-interactive 的強大之處來自 Flint 的編譯器：它會把用戶互動轉換成語義事件，捕捉用戶選取內容背後的含義。然後，它會使用高階運算子，根據這些事件更新視覺化內容，讓建立和維護複雜互動變得容易得多。這把解決互動邏輯與視覺邏輯之間複雜相依關係的繁重工作交由編譯器處理，讓用戶（或 Agent）可以透過高階規格，輕鬆描述豐富多樣的互動。

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。使用最新版本時，只要告訴 Agent 要繪製甚麼圖表，以及需要哪些互動；它便可在 Flint 圖表規格之外，一併生成 interaction_spec，並在對話中呈現互動式圖表。

graphical user interface, chart — 例子 2：在對話環境中使用 Flint-interactive，讓 Agent 透過簡單的 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：Agent 可以使用 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 讓 Agent 透過對應「用戶正在互動的是甚麼語義事件」和「他們希望畫布區域作出甚麼更新」，來描述互動邏輯。編譯器負責處理繁重的視覺更新解析工作並管理執行階段，令互動設計更可靠c且更具成本效益。

這種分工表示用戶無須反向解析繪圖邏輯或操作特定繪圖器的標記，令互動更容易描述和維護。此外，由於事件生成和視覺更新可以組合，同一個模型亦能將 Flint 連接至表格、文字、其他圖表和小工具，以建立互動式故事和儀錶板。

立即試用！

圖表用戶：在聊天中設定 Flint（在新分頁開啟），並請你的 Agent 建立互動式圖表。可到互動範例集尋找靈感。

應用程式開發者：使用程式設計 API（在新分頁開啟）建立互動式儀錶板、數據故事和互連視圖。將互動編寫技能分享給你的程式編寫 Agent，為應用程式加入預設項目。

互動設計師：探索專屬範例（在新分頁開啟），設計新的互動方式，並將其轉化為可重用的預設項目。在 GitHub 提交預設項目建議，並分享原型或實作，協助擴展 Flint 的互動詞彙。

在新分頁開啟

文章Flint-interactive：建立互動式資料視覺化的語言最初刊載於Microsoft Research。