D3.js 互動式資料視覺化-入門班

在當今資料巨量化的浪潮下,過量的資訊已令人無法招架,唯有使用適當的方式加以分析與詮釋,才能從資料中快速判讀並瞭解其背後意義,進而發現關鍵問題甚至掌握趨勢。資料視覺化便是最直覺的解法,它除了代表一個將資訊對應到視覺元素的過程,同時也是人類溝通的一種重要的方法。

如果今天你想在網站上做資料視覺化,你會怎麼做?透過繪圖軟體畫出統計完的資料圖表再存成圖檔上傳?還是利用文書處理軟體的模板產生千篇一律的圖表放在網站裡呢?透過D3.js所提供各種視覺化輔助函式,不光是一般的長條圖、圓餅圖或折線圖,還可以在網頁中做出各式各樣高互動性的動態圖表(詳細的各式圖表及介紹,可以參考d3.js官方網站: https://d3js.org)。

D3是Data-Driven Documents,是一個以JavaScript為基礎的工具,可以用來將數據資料載入到網頁中,並且透過函式建立視覺化效果,甚至可以動態地與使用者互動。

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

課程大綱

• 第一堂:D3基本介紹與資料視覺化概覽
• 第二堂:D3開發工具簡介與環境架設
• 第三堂:網頁前端HTML, CSS, JavaScript 入門
• 第四堂:網頁前端HTML, CSS, JavaScript 基礎
• 第五堂:向量圖SVG概述與基礎
• 第六堂:D3入門(資料)
• 第七堂:D3基礎 Part1(繪圖)
• 第八堂:D3基礎 Part2(繪圖)
• 第九堂:D3進階 Part1(互動)
• 第十堂:D3進階 Part2(互動)
• 第十一堂:資料視覺化實戰專題Part1
• 第十二堂:資料視覺化實戰專題Part2

課程應用

D3.js可以讓你將手邊的數據資料透過使用 HTML、SVG 及 CSS 繪製出動態資料圖表,在這堂課中,你可以學到:

•網頁前端HTML,CSS,JavaScript,SVG基礎概念
•透過 D3.js 解析數據文件內資料
•系統性深入了解D3.js核心與資料模型概念
•製作基本與進階的動態圖表

適合對象

符合其一條件者皆可報名:

◦對「資料視覺化」有興趣並稍熟悉HTML,CSS,JavaScript者
◦較無基礎但願意勤奮自學「資料視覺化」及「網頁開發」的上班族或學生族
◦修習過HTML5, CSS3, jQuery, Bootstrap 網頁設計基礎班者
◦修習過JavaScript網頁前端工程入門班者
◦修習過CSS網頁設計與特效者

開發環境

本課程將使用初學者易上手的跨平台Adobe Brackets做為主要D3.js網頁開發環境。
而D3.js本身則不需要額外安裝任何框架或是套件。
學員皆可自行下載並安裝於任意系統的筆電中進行學習。

近期班次

  • 第296期 開課日期:2018.04.25 停開一期

    上課時間:每週(三)(六)
    7:00 PM ~ 10:00 PM
    上課日期:2018.04.25 ~ 2018.05.26
    學費:新生新台幣5000元整

    停止報名 詳細資訊

  • 注意事項

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

    講師介紹

    • 臺灣大學 資訊網路與多媒體研究所 碩士
    • 交通大學 資訊工程學系 學士

    經歷

    • 2016 台大創新與創業學程 網管
    • 社群輿情觀測與分析網頁平台系統開發
    • 2014起至今擔任大數據應用相關專案: 科技部、工研院、中央銀行等單位-資料探勘與分析專案研究員
    • 法務部調查局幹部訓練所-資料視覺化及輿情分析研習班 講師

    得獎紀錄

    • IndieCade’15 美國獨立遊戲設計大賽3D Jam-世界第七名
    • 美國計算機協會ACM 人機互動會議CHI’15 學生遊戲競賽-創新介面組 TranSection Top 3
    • 100年台電全國電力溝通宣導與多媒體廣告競賽 - 大專組第一名
    • 中華民國汽機車協會「創意就是力量」第四、五屆交通安全影音動畫大賽 機車、汽車組 冠軍
    • HackNTU’14 第二屆臺大黑客松-第二名&人氣獎 ● Hackathon Taiwan 10th 台灣黑客松-最佳設計獎
    • MobileHero 2014 通訊大賽 聯發科穿戴式暨物聯網競賽-季軍
    • 2016 智慧城市黑客松 實踐家組 優質創作獎
    • 2016 第十四屆台大創新競賽 評審團銅獎&人氣賞 專長技能
    • 程式開發經驗:C/C++, Java, PHP, JavaScript, HTML, CSS, Python, VB, Shell Script, Processing, NodeJS, MongoDB, MySQL, Unity 3D, Matlab, Meteor.js
    • 2D、3D電腦動畫與特效相關影像製作:AfterEffect, Illustrator, Photoshop, Final Cut Pro, 3Ds Max, Maya, Sketch Up, zBrush