前言

大家好我是Andy，今年又回來參加鐵人賽了，希望今年也能順利地完賽XDD

這次要帶給大家的是資料視覺化的技能，使用的是最麻煩同時也最彈性的 D3.js，同時搭配上前端三大主流框架之一的 React.js，利用 30 天的時間讓大家熟悉資料視覺化的操作，之後的 code 會擺在 CodeSandbox 以及 GitHub 上面讓大家參考。

先備知識

• 對 JS 有一定的認知

  這次的系列文會講到大量的 JS，如果對於 JS 沒有最基礎的了解可能會不太清楚文章的內容，強烈建議先了解 JS 的基本知識，筆者自己也有寫一些 JS 基礎的文章，歡迎讀者來閱讀。

  關於JS中的淺拷貝(shallow copy)以及深拷貝(deep copy)

  閉包！closure

  this作用域

  JS模組化(匯入匯出篇)

• 對網頁的寫法有一定的認知

  這次的系列文不會刻意介紹最基本的 HTML、CSS 以及 JS ，如果對於上述這些技能有比較不懂，歡迎閱讀筆者去年鐵人賽的文章XD

  從0開始的網頁生活！30天從網頁新手到網頁入門

文章規劃

• React.js 基本介紹

  講講 React.js 最基本的觀念以及寫法，讓大家了解目前三大主流框架之一的 React.js 是如何撰寫的。

• React Hook 介紹

  在最新的 React.js 中，新增了一個新的功能：Hook，由於筆者最終目的就是要利用 Hook 來撰寫視覺化的元件，因此這邊會介紹一點 Hook 的觀念以及寫法。

• React.js 環境架設

  講講 React.js 在本地端的環境架設，這邊會用 React.js 開發的 create-react-app 以及自己手動撰寫 Webpack 檔案的方式來進行本地端環境架設。

• D3.js 介紹

  講講 D3.js 這個既麻煩又好用的資料視覺化套件，這邊將會完整介紹 D3.js 最基本且重要的觀念以及用法，並教大家如何一步一步的畫出常見的那些圖表。

目標

本系列文會盡量以淺顯易懂的方式並搭配圖片來闡述資料視覺化的基本概念，讓初學者可以非常快速的做出視覺化的效果且不喪失整體的美觀，藉以降低資料視覺化的學習門檻。

問題與討論

如果看完文章有任何問題或是建議都歡迎在下方的留言區留言給我，筆者每個留言都會看也都會回覆喔！