資料視覺化 — 台灣性侵害統計簿

這次想實作這個主題是因為看到新聞加上資料也相對齊全的關係，想說剛好也可以推廣 Svelte 本身，就一邊構想一邊把他實作出來了。成品在這裡

資料視覺化一直是我想好好研究的領域之一，不只是單純做出炫砲的圖表而已，我希望可以從中鍛鍊好說故事的技巧，而資料視覺化剛好是個很好拿來當作練功的材料之一。

之前也有陸陸續續做一些專案，只是感覺都有點太趕，沒有好好去雕細節。想說從這次之後要好好把常用的元件整理起來。

• 2017 年寫的勞工大代誌
• 2017 年寫的 Year In Review
• 2020 年 4 月份寫的福岡疫情感染情況：現在圖表整個跑版，當初沒想到疫情會燒那麼久

資料整理

資料大部分都來自衛福部，資料蠻詳細的。只是資料都是以 excel 格式為主，在轉換成比較容易處理的資料格式時花了不少時間。

實作

技術上使用了 Svelte 與 d3 做開發，我希望可以慢慢實作一套自己用得順手的圖表元件，目前還在觀察使用情景，所以元件都還寫得比較死一些，之後應該可以慢慢改進。

一個普通的線圖要考量的元素：

• x, y axis 與 tick
• x 與 y 的 scale 設定
• 直線、橫線的樣式設定
• 圖表標題與單位
• text 設定
• transition
• tooltip：hover 到線圖上的行為操作

d3 的話，在這邊只有用到 d3-scale 而已，也沒有使用 d3 的 pattern 像是：

d3.select('svg')
	.enter()
	.data(data)
	.append()
	...

主要是因為我想把這些操作全部交給 Svelte 處理，但在做 transition 跟 enter, exit pattern 的時候就蠻綁手綁腳的，因為 d3 可以直接用 API 呼叫處理掉，但在 Svelte 需要另外做處理。這部分再看看怎樣調整會比較好。這次也採用了比較新的 Snowpack，開發上真的蠻順的推薦給大家。

後端的話則是使用 Kotlin 當 API Server，主要是因為第一次寫覺得很舒服，另外之後可能會想要做排程或是做 multi-threading 之類的任務，直接用 Kotlin 會比較方便一些。Server 的話是直接部署到 App Engine，搭配 Gradle 其實還蠻方便的。

反省

大概兩天就把主要的部分實作完了，後面都在雕細節跟互動。這次的互動老實說也沒有很多，主要是想如何呈現資訊會比較好。這次是以單純顯示資料為主，之後的專案想提供更多可能性與互動，另外就是如何透過互動來說故事了。