鐵人檔案
「資料視覺化」一詞近期沸沸揚揚的，在網頁應用上D3.js佔了很重要的一位。D3.js不只是網頁視覺化的利器，在處理複雜龐大資料上更是有其一定的優勢。在這30天內將會從D3基本的API使用，到圖表與地圖的實例應用，並結合前端框架與串接open api，建置完整的網站。
昨天我們建立了bar chart的component，並畫出了長條圖中的長方形們，今天我們要加上底下的時間標示以及後方的一條一條的座標軸。 設計稿標示文件：ht...
我們花了兩天的時間完成了一個有模有樣的長條圖，但感覺少了點什麼？參觀一下其他畫圖表的library，你會發現大家都喜歡為圖表加上一點入場動畫，而長條圖最適合的動...
昨天我們幫圖表加上了一點進場動畫，因為座標軸沒有明確的數字，所以我們今天要加上hover圖表的提示（tooltip），也多了一點互動效果。 設計稿標示文件：ht...
在開始之前我要先說一個很智障的事情，那就是長條圖明明就叫做BarChart，但我之前component取名叫LineChart...所以再麻煩大家改一下名字.....
昨天我們完成了折線圖，今天我們將會為折線圖加上一點進場動畫及互動的資料提示。 進場動畫 通常折線圖的進場動畫就是由左而右畫出線，那麼該怎麼實作呢？我的想法是做一...
今天來到另一個重頭戲，就是接open api拿到實際的天氣資料，我們選用的是這個api：https://works.ioa.tw/weather/api/doc...
到昨天為止我們的專案算告一個段落了，在最後我還因應真實資料做了一點微調： 長條圖：在所有資料都是0時要手動讓長方形高度為零，否則D3幫你算出來會是全部半個圖表...
剛完成了一個比較完整的專案，是不是對D3又更熟悉了一點，也知道實際該怎麼與前端框架整合了？ 接下來我們同樣會進行一個專案，不再是畫一般的長條折線圖，而是另一種常...
上一份專案我們選用的前端框架是vue，我有提到使用vue的原因是環境設定比較簡單，用官方的cli工具就能夠建立一個完整的專案架構。相較於vue來說，react就...
什麼是熱力圖（Heat Map）? 熱力圖常用來描述數據的分佈，使用上有兩種狀況：第一種搭配地圖或照片，讓人可以看出來某個資料在地域上的分佈，例如某項傳染病例在...
