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

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

適合對象

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

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

開發環境

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

實體課程注意事項

本班為實體課程,常見QA詳情連結

校園防疫措施詳情連結

公務員全程參與課程學習後可於課程結束後申請登錄公務人員學習時數

課程影片觀看期限至課程結束後一週關閉

(一)退費期限:開課日後⅓時數內,詳情連結

(二)查詢結業狀況:結業名單連結

近期班次

講師介紹

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

(一) 經歷:
2018-2020國立政治大學資訊科學系 兼任講師
2016-數巨飛船有限公司 共同創辦人
2015-2017國立臺灣大學創新與創業學程 網站管裡員
2014-社群輿情分析與AI技術應用專案: 科技部、工研院、中央銀行、國防部等單位 資料探勘與視覺化專案顧問與研究員
2016法務部調查局幹部訓練所-資料視覺化及輿情分析研習班 講師

(二) 教學經歷:
1. 2016年至本班教學,累計授課時數至2024年3月1日為1,880小時,為資深講師。
擔任:Python網路爬蟲與Scrapy課程、Python程式設計課程、D3.js互動式資料視覺化課程、Scratch程式設計一把抓課程、HTML5,CSS3,Bootstrap,jQuery網頁設計基礎班課程、CSS網頁設計與視覺特效專題班課程講師

2.國立政治大學:106-108學年度資訊學院-程式設計概論 授課老師
3.法務部調查局幹部訓練所:資料視覺化及輿情分析研習班 講師

(三) 得獎紀錄:
1.美國計算機協會ACM 人機互動會議CHI’15 學生遊戲競賽-創新介面組 TranSection Top 3
2.IndieCade’15 美國獨立遊戲設計大賽3D Jam - 7th
3.100年台電全國多媒體廣告競賽 - 大專組第一名
4.中華民國汽機車協會 第四、五屆交通安全動畫大賽 機車、汽車組 冠軍
5.HackNTU’14 第二屆臺大黑客松-第二名&人氣獎
6.MobileHero 2014 通訊大賽 穿戴式暨物聯網競賽-季軍
7.2016 第十四屆台大創新競賽 評審團銅獎&人氣賞

(四) 研究專長與興趣領域:
人機互動、資料視覺化、資料探勘、電腦動畫