鐵人檔案
內容提及D3Js和資料相關內容的知識，主題訂定為資料駕馭網頁，其實一部分原因來自D3Js原始英文來自於Data-Driven Documents，其中documents也是網頁中的物件，因此我將它命名成資料駕馭網頁也更好理解，預計不定時會補充官方API文件和網頁相關知識，文中能以step by step方式，期望讓Javascript和處理資料的初學者能夠理解。
畫出地圖 昨天的步驟已經將資料整理得差不多了，接下來要進行畫圖與先前的步驟一樣使用<path>和已經篩選過的資料tainanGeojson來繪製地圖...
散佈圖 結束完地圖的內容後，這幾天將會介紹先前沒有繪製過的圖表，之前使用長條圖來表示各個行政區的人口數，散佈圖則適合做兩個變數以上的關係性，如果呈現的狀況聚集的...
氣泡圖介紹 昨天已經介紹完散佈圖了，大致上與散佈圖的作法大同小異，差別在於氣泡本身也就是circle，也能呈現一個變數值，在svg裡面我們將設定其屬性r來定義氣...
半徑R圓心座標(x,y)與x,y軸的關係 昨天我們渲染了圖表出來，但是出現的問題是超出了座標軸的範圍，這邊先解釋一下接下來要解決的方式的原理 我們預計使用者可以...
圓餅圖(環圈圖)簡介 圓餅圖和環圈圖常出現在我們統計圖表當中，一般用來表示各個分類的數量所佔的百分比，由幾個扇形的圓形統計圖表，這些扇形區域合起來剛好是一個完全...
昨天已經介紹了產生圓圈圖的範例，今天將要帶入真實資料作範例，接下來將會使用先前的縣市人口數的資料製作環圈圖，預計將會製作直轄市人口比例和非直轄市人口比例，滑鼠滑...
樹狀圖介紹 以下節錄自維基百科樹狀結構 樹狀結構（英語：Tree structure），又譯樹形結構，或稱樹狀圖（tree diagram）是一種將階層式的構...
沒有資料就沒有燃料，沒有燃料就變成廢料—淺談特別篇 標題取名的緣由一方面來自於d3JS的全名Data-Drive-Documents令一方面Documents-...
前言 本日主要內容包含另一個網路擷取資料方式Convert HTML Tables To JSON、談及統計方法中位數的意義、盒鬚圖介紹與繪製並淺談其意義。 淺...
繪製自己鐵人賽文章資料所構成的圖表 最後一天就來做個本次文章系列的總結吧，我用puppteer爬取了我前29天的文章字數，帶入d3呈現了視覺化圖表如下圖 這邊...
