Notion Formula 2.0 § 數據視覺化：圖表製作範例與進階應用
前言
之前，我寫過一篇〈公式 2.0 替代 Rollup 統計效果整理〉，如果只看這篇，可能會覺得還不夠深入。但其實，這只是基礎篇，進階應用才是精華！這次，我們要進一步思考：如何把數據視覺化？
這篇筆記將示範如何利用 Formula 2.0 來打造統計圖表的視覺化效果，而不是透過 Notion 的 Chart View(畢竟免費版的只有一個扣搭可以使用，需要想些其他方法來實現視覺化🤣)。
範例與練習
範例一 - 格子柱狀圖
這個資料來自 X (Twitter) 上的 KenshiDigital，他慷慨地分享了自己的點子和公式內容。
有些朋友擔心照著圖片輸入公式時會打錯，又不知道怎麼快速比對，因此，我在「範例一」的頁面中提供了原始公式，可以直接複製使用！
此外，我嘗試簡化這段公式，主要是調整進度條計算格子數量的部分，減少重複的ifs()判斷。
............
**/* 原始公式 Progress bars */**
list.map(
titles.at(index).style("c", "b", prop("顏色")) + ": " + style("■", "b", prop("顏色")) +
ifs(
current.length() == 6, current.style("c", "b", prop("顏色")),
current.length() == 5, current.style("c", "b", prop("顏色")) + style(" ", "c", "b", prop("顏色")),
current.length() == 4, current.style("c", "b", prop("顏色")) + style(" ", "c", "b", prop("顏色")),
current.length() == 3, current.style("c", "b", prop("顏色")) + style(" ", "c", "b", prop("顏色")),
current.length() == 2, current.style("c", "b", prop("顏色")) + style(" ", "c", "b", prop("顏色")),
current.length() == 1, current.style("c", "b", prop("顏色")) + style(" ", "c", "b", prop("顏色"))
) + " | ".style("c", "b", prop("顏色")) + " " +
............
精簡後的版本如下：
............
**/* Chloe 修改的 Progress bars */**
樣式一, ["c", "b", prop("顏色")],
list.map(
titles.at(index).style(樣式一) + ": " + style("■", "b", prop("顏色")) +
ifs(
current.length() <= 6,
current.style(樣式一) +
style(" ".repeat(6 - current.length()), 樣式一)
) + " | ".style(樣式一) + " " +
............
練習一
讓我們以〈公式 2.0 替代 Rollup 統計效果整理〉的範例來練習，將裡面的統計數據轉換為視覺化圖表。公式已放入「練習一」頁面，歡迎參考、練習。
範例二 - 直方圖
這個直方圖公式來自我非常喜歡的 Notion 大神 あか | Aka | Notionｦﾀｸ 編寫的，他的文檔中有詳細的步驟解析，我在練習時將部分內容翻成中文，未大幅修改公式。
如果想要做出更多的修改，我想我會把一些設定值，像是刻度、顏色等，寫在lets()公式中。不過以Select的選項去選擇與設定也是有好處的，方便大家快速操作，也適合模板販售。
應用場景方面，我覺得以下這幾個方向都挺適合的：
- 老師們統計學生的成績分布。
- 追蹤不同項目的資金變化狀態。
- 客戶年齡結構。
- ……
範例三 - 數值追蹤
這是在阿汪同學的影片中學習到的，影片中只有體重追蹤的公式演示。因此除了影片中的題目以外，我們要練習另一個睡眠紀錄的追蹤視覺化效果。(我覺得這個挺有折線圖的感覺的📈~)
主要設置如下：
- 體重變化數據：目標體重、初始體重、當前體重。
- 計算格子數量：初始體重與目標體重中間差值，劃分成 20 個格子。
- 圖示對齊：使用「全形的空白」移動 icons 的長度。
練習三
現在，我們要實現圖片的手帳中的睡眠追蹤方式。
會需要的資料有入睡時間、起床時間，還要額外計算睡覺總時間。
這部分可以參考文章〈Notion Formula 2.0 § Progress Bar 進度條〉。
這裡要特別提醒的是，因為我們睡眠的時間，有機會會跨越不同日期，所以我在進度條的部分都有額外+5，可以理解位移的概念，你可以根據自己平時的習慣，調整在前面多幾個符號-的數字。
範例四 - 圓餅圖
如果想要製作圓餅圖，推薦使用 Mermaid 語法。建立公式後，每次更新數據時，只需複製公式輸出的內容，貼到 Code Block 即可生成圖表！
這個不難，就是需要去兜出好看的公式排版，需要算一下空白要留幾個🤭。
所有的公式都在各個範例或練習的頁面中，想研究的朋友可以查看對應的資料🚀。
範例頁面
參考資料
