半熟前端

軟體工程師 / 台灣人 / 在前端的路上一邊探索其他領域的可能性

前端

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

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

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

截圖 2020-11-23 23.20.38

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

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

資料整理

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

實作

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

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

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

d3 的話,在這邊只有用到 d3-scale 而已,也沒有使用 d3pattern 像是:

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 其實還蠻方便的。

反省

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