fbpx

[中文課程] 零基礎學 D3.js 資料視覺化

這門課程將會從最基本的網頁前端開發開始,

而逐步涵蓋 D3.js 與資料視覺化的概念,

入門至進階,並穿插實作範例與練習

逐步帶領大家實際走入網站資料視覺化的世界

為什麼學 D3.js 

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

  1. 各式新興媒體透過創造出具互動式圖表的網站來與使用者互動
  2. 透過資訊儀表板來傳達即時資訊
  3. 使用各式地圖來呈現地理資料集合

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

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

為什麼使用 D3.js ? Python 、R 語言、Excel 不也能做資料視覺化 ? 畢竟 Python、R 語言並非瀏覽器的預設的開發語言。雖然可以利用套件達到視覺化的效果,但每個語言有他們各自的強項,無法面面俱到。 D3.js 是以  JavaScript 為基礎的函式庫,而 JavaScript 正是瀏覽器引擎預設的腳本語言。

課程特色

  • D3.js 可以讓你將手邊的數據資料透過使用 HTML、SVG 及 CSS 繪製出圖表,不光是一般的長條圖、圓餅圖或折線圖,還可以在網頁中做出各式各樣高互動性的動態圖表
  • 課程內容亦會穿插實作範例與練習,來強化對於數據視覺呈現與互動的理解
  • 學會如何更深入使用 D3.js 等工具來製作視覺化原型以完成設計,從而向觀眾或讀者有效地傳達資訊或見解
  • 課程加量不加價。持續更新。
  • 教學風格循序漸進、深入淺出、以實例代替抽象,容易吸收。

適合我嗎? 需要哪些課程準備?

適用對象

  • 較無基礎但願意勤奮自學「資料視覺化」及「網頁開發」
  • 對「資料視覺化」有興趣並稍熟悉 HTML、CSSJavaScript

工具準備

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

知識準備

課程介紹 (共 16.8 小時)

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

1️⃣  基礎前端網頁設計概念和語法

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

d3js1.jpg

d3js2.png

d3js3.png

2️⃣  D3.js 重點觀念和 SVG 向量圖形繪製技巧

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

d3js4.png

d3js5.gif

3️⃣  視覺圖形、佈局互動、地圖繪製,從 基礎 → 進階 → 實作演練

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

d3js6.jpg

d3js7.jpg

d3js8.png

4️⃣  常見的資料格式與應用方式

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

d3js9.png

5️⃣  網路爬蟲與資料視覺化的親密關係

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

d3js10.jpg

講師介紹 

lintse

學歷

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

經歷

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

得獎紀錄

  • IndieCade’15 美國獨立遊戲設計大賽3D Jam-世界第七名
  • 美國計算機協會ACM 人機互動會議CHI’15 學生遊戲競賽-創新介面組 TranSection Top 3
  • 100年台電全國電力溝通宣導與多媒體廣告競賽 – 大專組第一名
  • 中華民國汽機車協會「創意就是力量」第四、五屆交通安全影音動畫大賽 機車、汽車組 冠軍
  • HackNTU’14 第二屆臺大黑客松-第二名&人氣獎
  • Hackathon Taiwan 10th 台灣黑客松-最佳設計獎
  • MobileHero 2014 通訊大賽 聯發科穿戴式暨物聯網競賽-季軍
  • 2016 智慧城市黑客松 實踐家組 優質創作獎
  • 2016 第十四屆台大創新競賽 評審團銅獎&人氣賞

課程網址  去預覽📈

hiskio-d3js

Sponsored by Hiskio

也許你會有興趣

喜歡我們的分享嗎? 使用以下的社群分享按鈕分享給你的朋友吧!

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: