D3.js資料視覺化

D3.js(Data-Driven Documents)是一個使用動態圖形進行資料視覺化的JavaScript函式庫,使用這個函式庫你將可以透過資料來改變網頁的文件物件模型(Document Object Model,DOM)進而達到資料視覺化的目的。

在這堂10小時的專題班裡,你將會學習到如何使用D3.js內的各種視覺化輔助函式將原始的資料繪製成可展示的圖表,並結合Firebase雲端系統儲存動態資料並將結果透過D3.js將取得的資料即時顯現至網頁前端的畫面上。

課程大綱

- 開發環境設定
- 向量圖像與SVG
- 認識D3.js函式
- 靜態資料圖表繪製
- 動態資料圖表繪製
- 結合Firebase顯現即時資訊
- 結合政府資料開放平台(data.gov.tw)原始資料實作資料視覺化

適合對象

- 理解基礎HTML, JavaScript語法
- 適合曾上過本班「HTML5, CSS3, jQuery, Bootstrap 網頁設計基礎班下集」或「JavaScript網頁設計入門」課程之學生

開發環境

- Visual Studio Code
- Firebase
- Google Chrome

近期班次

  • 第312期 開課日期:2019.06.16 確定開課

    上課時間:每週(六)(日)
    4:30 PM ~ 6:30 PM
    上課日期:2019.06.16 ~ 2019.06.30
    學費:新生新台幣3500元整

    備註: 需自備筆電

    詳細資訊

  • 注意事項

    • 上課地點:台灣大學資訊工程學系系館 詳細位置;教室號碼將於開課前一日公佈於官網"最新消息"中。
    • 上課教材:開課後將公布教學網站給同學查閱。
    • 結業狀況:請上官網”結業名單”查閱是否合格及可領取證書進度。

    講師介紹

    國立臺灣科技大學工商業設計系學士學位

    (一) 個人網站:https://enn.design

    (二) 經歷:
    Kyosei.ai - 前端工程師 (現職)
    Uninus 合一系統整合科技 網站設計與前端開發
    台北市政府春遊補助管理系統開發
    LINE HACK 2018 入選前十強
    緯創資通股份有限公司價值創新中心
    京尚股份有限公司
    微星科技工業設計中心

    (三) 教學經歷:
    國立臺灣大學資訊系統訓練班授課時數累計至2019年3月25日為1,160小時
    國立臺灣大學 - 資訊系統訓練班 Python程式設計課程講師
    國立臺灣大學 - 資訊系統訓練班 HTML5,CSS3,Bootstrap,jQuery網頁設計基礎班課程講師
    國立臺灣大學 - 資訊系統訓練班 Sketch 3 基礎專題班課程講師
    國立臺灣大學 - 文學數位應用與實作課程講師

    (四) 興趣:

    使用者介面設計、使用者經驗設計、HTML5、CSS3、JavaScript、Python、Node.js

    專欄文章:

    使用Node.js建置你的第一個LINE BOT

    使用VSCode外掛自動編譯SASS/SCSS