內容提及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呈現了視覺化圖表如下圖 這邊...