iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
Modern Web

React + D3 的正確姿勢 系列

資料視覺化可以說是 Modern Web 一項非常重要的技能,雖然目前市面上有非常多可以用簡單的程式碼繪出圖表的套件,但本系列文並不會這麼做,利用 30 天的時間用最原始的視覺化方法帶大家理解整個圖表製作的過程,並且搭配目前最夯的 React.js 以及 React Hook 讓大家可以用很潮的寫法進入資料視覺化的世界

鐵人鍊成 | 共 30 篇文章 | 54 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day21-D3基本介紹(transform)

前言 今天的內容會比較輕鬆一些,前幾天的文章內容可能有點太多而且不太好消化,所以今天筆者就打算講一點輕鬆的內容,但這個內容也是非常重要的,想要把一張圖表繪製好這...

DAY 22

Day22-bar chart(using D3.js)

前言 從今天開始的文章就正式進入實作的過程啦~ 這次的系列文預計會帶給大家 5 種不一樣的圖表,視覺化是個非常深奧的世界,筆者我也只會一點皮毛而已XD 所以這次...

DAY 23

Day23-multi bar chart(using D3.js)

前言 昨天的文章講完如何繪製長條圖後,今天要來講點進階版的長條圖了,其實說進階也沒到多進階就只是讓同一個 band 可以多畫一些 rect 出來形成多重長條圖而...

DAY 24

Day24-line chart(using D3.js)

前言 在講完長條圖之後接下來要介紹的是折線圖,折線圖也是視覺化中非常重要且基礎的一種圖表,廢話不多說馬上開始今天的文章吧! 折線圖 折線圖是用直線段將各數據點連...

DAY 25

Day25-pie chart(using D3.js)

前言 今天要來介紹一個比較特別的圖表,在前天的文章提到長條圖,用來反映事物分布、集中情況,昨天的文章提到折線圖,用來顯示數據的變化趨勢,但是這些都無法得知單一數...

DAY 26

Day26-donut chart(using D3.js)

前言 昨天的文章介紹了圓餅圖,今天要來介紹圓餅圖的變形版:環圈圖,其實筆者自己比較少用圓餅圖,只要是這種要計算數據比例的統計圖現在都改用環圈圖了,至於為什麼會有...

DAY 27

Day27-bubble chart(using D3.js)

前言 今天要來介紹本系列文最後一個圖表了,由於鐵人賽時間真的很有限沒辦法介紹全部的圖表,但筆者已經盡量把最常用的幾種圖表都介紹給大家了,相信大家學會這幾種圖表一...

DAY 28

Day28-React + D3(一)

前言 前面的文章都介紹完圖表的繪製後,今天終於要回歸主題,把 D3 跟 React 結合在一起了,今天跟明天的文章都會把以前所講的內容做一個統整,假如對 Rea...

DAY 29

Day29-React + D3(二)

前言 昨天的文章利用 componentDidMount 結合 D3 ,但相信讀者一定會覺得這樣的寫法又臭又長,而且這個 class 裡面也才寫了一個 comp...

DAY 30

Day30-結語

前言 不知不覺就到最後一天了,沒想到這次竟然也可以完賽,果然每天屁話個幾句就可以順利產出文章了(X 為了呼應上面所說,所以今天就來當個文章小偷來分類一下這次系列...