iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

從原料到燃料,從資料到預料—資料駕馭網頁之理科的美學 系列

內容提及D3Js和資料相關內容的知識,主題訂定為資料駕馭網頁,其實一部分原因來自D3Js原始英文來自於Data-Driven Documents,其中documents也是網頁中的物件,因此我將它命名成資料駕馭網頁也更好理解,預計不定時會補充官方API文件和網頁相關知識,文中能以step by step方式,期望讓Javascript和處理資料的初學者能夠理解。

鐵人鍊成 | 共 30 篇文章 | 12 人訂閱 訂閱系列文 RSS系列文 團隊好想工作室V5.0
DAY 21

D3JsDay21筆畫面量彩色圖,塗色彩亮面畫筆—地理面量圖(下)

畫出地圖 昨天的步驟已經將資料整理得差不多了,接下來要進行畫圖與先前的步驟一樣使用<path>和已經篩選過的資料tainanGeojson來繪製地圖...

2021-10-06 ‧ 由 DannyChen 分享
DAY 22

D3JsDay22給我兩個以上的變數,給你呈現資料的散佈—散佈圖

散佈圖 結束完地圖的內容後,這幾天將會介紹先前沒有繪製過的圖表,之前使用長條圖來表示各個行政區的人口數,散佈圖則適合做兩個變數以上的關係性,如果呈現的狀況聚集的...

2021-10-07 ‧ 由 DannyChen 分享
DAY 23

D3JsDay23 三槍俠的電磁砲,三個變數的氣泡—氣泡圖(上)

氣泡圖介紹 昨天已經介紹完散佈圖了,大致上與散佈圖的作法大同小異,差別在於氣泡本身也就是circle,也能呈現一個變數值,在svg裡面我們將設定其屬性r來定義氣...

2021-10-08 ‧ 由 DannyChen 分享
DAY 24

D3JsDay24 三槍俠的電磁砲,三個變數的氣泡—氣泡圖(下)

半徑R圓心座標(x,y)與x,y軸的關係 昨天我們渲染了圖表出來,但是出現的問題是超出了座標軸的範圍,這邊先解釋一下接下來要解決的方式的原理 我們預計使用者可以...

2021-10-09 ‧ 由 DannyChen 分享
DAY 25

D3JsDay25圈圈圓圓圈圈,甜甜黏黏甜甜—圓餅圖與環圈圖

圓餅圖(環圈圖)簡介 圓餅圖和環圈圖常出現在我們統計圖表當中,一般用來表示各個分類的數量所佔的百分比,由幾個扇形的圓形統計圖表,這些扇形區域合起來剛好是一個完全...

2021-10-10 ‧ 由 DannyChen 分享
DAY 26

D3JsDay26圓圈圖的實戰力,直轄市人口比例-帶入真實資料做圓圈圖

昨天已經介紹了產生圓圈圖的範例,今天將要帶入真實資料作範例,接下來將會使用先前的縣市人口數的資料製作環圈圖,預計將會製作直轄市人口比例和非直轄市人口比例,滑鼠滑...

2021-10-11 ‧ 由 DannyChen 分享
DAY 27

D3JsDay27What's the tree?Let me see—樹狀圖(tree diagram)

樹狀圖介紹 以下節錄自維基百科樹狀結構 樹狀結構(英語:Tree structure),又譯樹形結構,或稱樹狀圖(tree diagram)是一種將階層式的構...

2021-10-12 ‧ 由 DannyChen 分享
DAY 28

(特別篇)Documents-Delivered-Data,Data-DrivenDocuments—爬蟲D3做成D3(上)

沒有資料就沒有燃料,沒有燃料就變成廢料—淺談特別篇 標題取名的緣由一方面來自於d3JS的全名Data-Drive-Documents令一方面Documents-...

2021-10-13 ‧ 由 DannyChen 分享
DAY 29

(特別篇)統計學的陷阱區,用資料繪製盒鬚—爬蟲D3做成D3(下)

前言 本日主要內容包含另一個網路擷取資料方式Convert HTML Tables To JSON、談及統計方法中位數的意義、盒鬚圖介紹與繪製並淺談其意義。 淺...

2021-10-14 ‧ 由 DannyChen 分享
DAY 30

Not only MordernWeb,But also Data Club—閱讀建議、文章索引、結語

繪製自己鐵人賽文章資料所構成的圖表 最後一天就來做個本次文章系列的總結吧,我用puppteer爬取了我前29天的文章字數,帶入d3呈現了視覺化圖表如下圖 這邊...

2021-10-15 ‧ 由 DannyChen 分享