Kalan's Blog

本部落主要是關於前端、軟體開發以及我在日本的生活,也會寫一些對時事的觀察和雜感

目前主題 亮色

這次想實作這個主題是因為看到新聞加上資料也相對齊全的關係,想說剛好也可以推廣 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 其實還蠻方便的。

反省

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

上一篇

對於 SSR 的思考與使用場景

下一篇

記一次改善流程

如果覺得這篇文章對你有幫助的話,可以考慮到下面的連結請我喝一杯 ☕️ 可以讓我平凡的一天變得閃閃發光 ✨

Buy me a coffee

作者

Kalan 頭像照片,在淡水拍攝,淺藍背景

愷開 | Kalan

愷開。台灣人,在 2019 年到日本工作,目前定居在福岡。除了熟悉前端之外對 IoT、App 開發、後端、電子電路領域都有涉略。最近開始玩電吉他。 歡迎 Email 諮詢或合作,聊聊音樂也可以,希望能透過這個部落格和更多的人交流。