客製化的圖表平台Flourish,讓程式麻瓜也可以做出互動圖表

Chercher Studio
chercher-studio 角鯨腦汁事務所
4 min readMar 8, 2020

如果你一個人想要做互動圖表,被死線追趕,然後沒有設計師跟工程師幫忙,那你可以試試看「Flourish」這個圖表好朋友,可以製作互動圖表又可以做成專屬網頁。以新冠肺炎的疫情來說,想一目了然各國爆發人數以及順序,就可以用 Flourish做出下面這個動態圖表。

大寶庫!共有數十種互動圖表版型可使用

進入網頁後可以直接點擊「sign up」註冊會員,就可以開通功能。註冊以後你會來到一個工作面板,有兩個按鈕可以選擇:

→「New visualisation」可以新增單一圖表

→「New Story」則是可以把單一圖表集合起來說故事,製作成類似slide show的網頁。

點擊「New visualisation」後,你的眼前會出現一片寶庫,是各式各樣的圖表樣式,有簡單的折線、長條圖,也有地圖可以讓你選擇,如果還不滿足,往下滑還有各式各樣花俏的互動圖表版型給你選。

高度客製化的友善介面,數據與圖表樣式可簡單切換調整

Flourish的操作介面其實蠻簡單,掌握兩個重要功能「預覽」(Preview)與「資料」(Data)就可以輕鬆做出互動圖表。

預覽可控制客製化選項

「預覽」(Preview)會根據你選擇的圖表,在右欄出現可以客製化的選項,例如我選擇折線圖,右側可以客製化的欄位就包含:圖表風格、區間、資料標籤、xy軸功能調整、標題、資料來源等等。

填寫欄位客製化你的資料

點擊「資料」(Data)後,介面會出現樣本數據,你可以在這邊觀察一下數據格式,然後匯入相同格式的資料。介面右邊會出現很多欄位讓你填(每個圖表可填寫的欄位狀況不一),大原則就是「根據欄位說明,去填入你想要呈現的欄位名稱。」。不一定每個都要填,如果是必填欄位旁會出現「required」提醒你。

註解功能,告訴讀者圖表重點在哪

我最喜歡的一個功能是「註解」(annotation),他可以讓你可以幫圖表內容話重點,告訴觀眾應該看哪裡。

如下列範例,註解分為「單點式」與「區間式」:

「單點式」,如果你想要告訴讀者2011年單年是第一波高峰,你可以在「Line Highlights」這邊填寫公式(thing是你要呈現的文字,2012是你要選擇的x軸節點)。

「區間式」,如果想強調2010~2012年,就在「Range Highlights」填公式(thing是你要呈現的文字,2013>>2015是你要選擇的x軸區間)。

「add New Story」可將單一圖表串集成故事

如果你想用圖表說故事,Flourish也提供一個選項,記得開始介面的「add New Story」嗎?基本上它很像是可以鑲入Flourish圖表的簡易簡報軟體,功能包含新增投影片、投影片文字編輯、自動播放秒數等。製作完成就可以publish,網站會自動生成一個專屬網頁以及鑲入碼。

如果還想知道更多資訊設計的作品分享,可以追蹤「角鯨腦汁事務所」喔!如有資訊設計需求,也可洽事務所信箱:chercherstudio@gmail.com

--

--

Chercher Studio
chercher-studio 角鯨腦汁事務所

提供各式議題資訊設計服務,包含社群素材、資訊圖表、插畫繪製、懶人包、網頁設計等,歡迎私訊或來信詢問。臉書:https://www.facebook.com/chercherstudio/