前兩篇 Case Study 分別從 Spinwheel Interaction 與 Interactive Aquarium 看到了 Rive 在互動流程和角色行為上的應用。

這次想換個方向，如果今天不是做按鈕、轉盤或角色，而是拿 Rive 來呈現資料呢？

這個案例其實在做的事情很簡單，就是把海域深度這類資料做成互動式的視覺呈現。不過它沒有走傳統圖表的路線，而是把資料直接放進一個有完整視覺與動畫的場景裡，這也讓原本比較靜態的數據，多了一點正在發生的感覺。

https://rive.app/marketplace/22800-42684-european-seas-interactive-chart/

如果用傳統圖表會怎麼做？

如果今天要做一個海域深度的資料視覺化，我想大部分前端應該都會很自然地想到用傳統圖表來處理。拿到 API 資料後，根據數值決定高度、顏色或位置，再搭配 tooltip、hover 等互動，其實就已經可以完成一個很好用的圖表。

而且這種方式有一個很大的優點：簡單、直覺，而且數字要比較多少就是多少。

但今天要的不是一張「圖表」，而是希望資料直接融進一個設計好的視覺裡，這時候複雜度就會差滿多了。前端除了處理資料，還要開始顧那些原本不屬於圖表的東西，例如場景中的動畫、視覺狀態，以及資料變化時畫面該怎麼跟著改變。

這時候會開始發現，原本只是「把資料畫出來」，最後可能變成「我要自己把這整套視覺也做出來」。

讓資料直接成為視覺的一部分

European Seas 比較有意思的地方，就在於它沒有把 Rive 當成一個「比較漂亮的圖表工具」，而是換了一個思路：

先有一個完整的視覺，再讓資料進去。

海域深度這類資料，可以直接影響主要視覺的呈現；另一方面，原本設計好的動畫也可以繼續運作。資料跟動畫不需要硬拆成兩套東西。

這對前端來說其實滿方便的。

設計師可以先在 Rive 裡把視覺和動畫做好，前端則負責把資料接進來。之後如果只是想調整動畫或視覺細節，也不一定需要跑回程式碼裡改一堆東西。

當然，這不代表 Rive 就能取代傳統圖表元件。

如果今天只是要比較銷售額、流量或營收，長條圖就是很好用，真的沒必要為了一個 hover 動畫把事情搞複雜。

Rive 比較適合的，反而是那種資料本身也是體驗一部分的情境。

像是教育內容、互動式故事、品牌網站，或是希望把一組資料放進特定主題視覺裡。這時候在意的就不只是「數字有沒有顯示」，而是「這些數字要怎麼呈現」。

European Seas 做的事情，我覺得可以簡單理解成：

它不是把資料做成一張圖表，而是讓資料進入一個原本就存在的視覺世界。

這也是 Rive 在資料視覺化這件事情上，蠻有趣的一個切入點。

參考資料

• Rive Marketplace - European Seas Interactive Charthttps://rive.app/marketplace/22800-42684-european-seas-interactive-chart/