零基礎學 D3.js 資料視覺化

值得您投資的熱門新技能：資料視覺化

D3.js目前s正廣泛應用於成千上萬的網頁中，可分為幾種類型：

1.各式新興媒體透過創造出具互動式圖表的網站來與使用者互動

2.透過資訊儀表板來傳達即時資訊

3.使用各式地圖來呈現地理資料集合

可見，視覺化對於資料的重要性與需求性逐漸上升。網路時代裡，搜集資料已經不再稀奇，能夠將繁雜的資料有效的呈現，並加以利用和傳播，有效率地與他人溝通，讓更多人理解資料所傳達的訊息，進而解決問題，才是重點。

(圖來自本課程教材)

 

資料視覺化的利器 - D3.js

D3全稱為Data-Driven Documents，是一個以JavaScript為基礎的函式庫，使用它主要是用來做資料視覺化。其結合SVG、HTML5、CSS，可以用來將數據資料載入到網頁中，並且透過其提供之函式來建立視覺化效果，甚至可以動態地與使用者互動。

D3.js本質上是JavaScript，卻將產生視覺化的複雜步驟精簡到幾個簡單的函數，大大簡化了JavaScript操作數據的難度。除了大大減少開發者的工作量外，只需要輸入幾個簡單的數據，就能夠轉換為各種絢麗的圖表。

以目前來說，有關D3.js在中文方面的線上課程及相關資源相對稀少，在網路上具有脈絡性的視覺化技術相關教學也尚顯不足，大部份是以零散的片段和文章存在，初學者想要跨入此領域實在是一大門檻。

為什麼使用 D3.js ？ Python 、R 語言、Excel 也能做資料視覺化呀！

如果今天你想在網站上做資料視覺化，你會怎麼做？透過繪圖軟體畫出統計完的資料圖表再存成圖檔上傳？還是利用文書處理軟體的模板產生千篇一律的圖表放在網站裡呢？透過Python、R語言似乎也能做到資料視覺化呀！（例如 R 語言的套件包 ggplot2, Python的繪圖庫matplotlib)，但很快地，您會發現...

彈性較差、使用者互動性尚顯不足、能改動的視覺效果有限、圖表樣式選擇較少、有bug不知怎解決...等一堆問題。

畢竟 Python、R 語言並非是瀏覽器的預設的開發語言。雖然可以利用套件達到視覺化的效果，但每個語言有他們各自的強項，無法面面俱到。 D3.js 就是以 JavaScript 為基礎的函式庫，而JavaScript 正是瀏覽器引擎預設的腳本語言。相比之下，當然是大獲全勝囉！

透過D3.js所提供各種視覺化輔助函式，不光是一般的長條圖、圓餅圖或折線圖，還可以在網頁中做出各式各樣高互動性的動態圖表(詳細的各式圖表及介紹，可以參考d3.js官方網站: https://d3js.org

(圖來自本課程教材)

從零開始，這門課將帶給您五大重點

HTML + CSS + JavaScript 是前端網頁必備的技能，這堂課會再以重點精華的形式，帶您了解基礎網頁的構成，以及加深基本語法的熟悉度。

 (圖來自本課程教材)

視覺的東西常常做出來會與我們想像中的不一樣，其實有時候僅是觀念清晰度和語法熟悉的問題罷了。這裡讓您一次就搞懂D3.js 的核心觀念與實際應用方式，如何透過現有手邊的資料快速進行資料視覺化。

(圖來自本課程範例)

在課程的第八章開始，我將帶您學利用資料來繪製圓餅圖、泡泡圖、長條圖，並建立視覺互動的特效。讓您能很清晰地瞭解從基礎到實際操作的流程。最後透過繪製「台灣登革熱疫情點位置圖」來進行實作演練，從無到有地完成多個屬於您自己的D3 作品！

(圖來自本課程教材) 

常常聽到人家在講到CSV、JSON、XML 聽都聽不懂？資料交換格式的用法與差異性。這裡通通告訴你。

說到資料視覺化，不免就要提一下「網路爬蟲」。一般我們常見會用 R、Python撰寫一隻網路爬蟲，抓取網路上的「資料」，並將其加以過濾整理，再透過視覺化呈現。在課程的章節裡，將會講解網路爬蟲的基礎原理，並示範快速打造一支網路爬蟲，節省撰寫爬蟲的時間，讓您能專注在資料視覺化的技術上。

這門課的其他特色

1. 教學風格循序漸進、深入淺出、以實例代替抽象，容易吸收。
2. 15小時重點精華，內容精彩完整。
3. 課程加量不加價。持續更新。
4. 任何人想學，皆可快速上手，無預設門檻。
5. 老師操作示範，實際演練，加深學習效果。

(圖來自本課程範例)

適合每一個想學習D3.js的 妳/ 你

本門課程將會預設大家只有一點網頁前端開發基本知識，從最基本的網頁前端開發開始，而逐步涵蓋資料視覺化與D3.js的概念，從D3.js入門至進階，並穿插實作範例與練習逐步帶領大家實際走入網站資料視覺化的世界。

一起來學習D3.js 一起踏上這趟資料視覺化的旅程吧！

關於講師

學歷

● 國立臺灣大學 資訊網路與多媒體研究所 碩士

● 國立交通大學 資訊工程學系 學士

經歷

● 2016 台大創新與創業學程 網管

● 社群輿情觀測與分析網頁平台系統開發

● 2014起至今擔任大數據應用相關專案: 科技部、工研院、中央銀行等單位-資料探勘與分析專案研究員

● 法務部調查局幹部訓練所-資料視覺化及輿情分析研習班 講師

得獎紀錄

● IndieCade’15 美國獨立遊戲設計大賽3D Jam-世界第七名

● 美國計算機協會ACM 人機互動會議CHI’15 學生遊戲競賽-創新介面組 TranSection Top 3

● 100年台電全國電力溝通宣導與多媒體廣告競賽 - 大專組第一名

● 中華民國汽機車協會「創意就是力量」第四、五屆交通安全影音動畫大賽 機車、汽車組 冠軍

● HackNTU’14 第二屆臺大黑客松-第二名&人氣獎

● Hackathon Taiwan 10th 台灣黑客松-最佳設計獎

● MobileHero 2014 通訊大賽 聯發科穿戴式暨物聯網競賽-季軍

● 2016 智慧城市黑客松 實踐家組 優質創作獎

● 2016 第十四屆台大創新競賽 評審團銅獎&人氣賞