鐵人檔案
資料視覺化可以說是 Modern Web 一項非常重要的技能，雖然目前市面上有非常多可以用簡單的程式碼繪出圖表的套件，但本系列文並不會這麼做，利用 30 天的時間用最原始的視覺化方法帶大家理解整個圖表製作的過程，並且搭配目前最夯的 React.js 以及 React Hook 讓大家可以用很潮的寫法進入資料視覺化的世界
前言 今天要來介紹如何手動建立 React.js 的開發環境，今天要介紹的東西需要對 Webpack 有點基礎知識，由於 Webpack 的基本觀念非常多因此筆...
前言 從今天開始到結束的文章沒意外都會講 D3.js 了，前端能做資料視覺化的套件非常多，只是筆者覺得在用其他比較方便的套件之前應該要先了解整個圖表繪製過程，而...
前言 今天要來介紹 D3.js 中第一個重要觀念： scale 以及 range ，在 D3.js 中的每個圖表都必須要設定 scale 以及 range ，今...
前言 昨天講了跟輸出區域有關的 scale 以及 range ，今天要來談一下輸入區域的 domain 了，這裡筆者會多提一個 endpoint ，其實這個 e...
前言 今天要來介紹一個蠻重要的技巧，一般來說 JS 用來處理時間的套件相信大家首選都是 Moment.js ，當然筆者也是一樣，不過今天筆者並沒有要介紹 Mom...
前言 今天的文章跟昨天的內容基本上差不多，今天要來講講 D3 是如何處理數字格式，其實數字是不需要經由 D3 去轉換也可以直接使用 d3.scaleLinear...
前言 從今天開始的文章就正式進入 D3 的圖表繪製設定了，光最基本的輸入輸出區域就花了不少篇幅說明 (其實是為了拖台錢讓鐵人賽更容易完賽XD) ，總之接下來的文...
前言 在昨天的文章講完如何先初始化一個 svg 容器來填入圖表後，今天要來介紹如何把資料傳進去 svg 內進行圖表繪製嘍！ selectAll 昨天介紹了 d3...
前言 在昨天的文章講完如何傳資料進去圖表後，今天要來介紹另一個重要的觀念： Axis 了，其實 Axis 代表的就是座標軸上的設定，透過客製化調整 Axis 的...
前言 在講完所有的圖表設定後，今天要來介紹如何讓我們設計好的圖表可以跟使用者進行互動，為了要讓圖表能進行互動我們就必須要將圖表設定一些 event ，這樣使用者...
