這門課程將會從最基本的網頁前端開發開始,
而逐步涵蓋 D3.js 與資料視覺化的概念,
從入門至進階,並穿插實作範例與練習
逐步帶領大家實際走入網站資料視覺化的世界
為什麼學 D3.js
D3.js 目前正廣泛應用於成千上萬的網頁中,可分為幾種類型:
- 各式新興媒體透過創造出具互動式圖表的網站來與使用者互動
- 透過資訊儀表板來傳達即時資訊
- 使用各式地圖來呈現地理資料集合
可見,視覺化對於資料的重要性與需求性逐漸上升。網路時代裡,搜集資料已經不再稀奇,能夠將繁雜的資料有效的呈現,並加以利用和傳播,有效率地與他人溝通,讓更多人理解資料所傳達的訊息,進而解決問題,才是重點。
D3.js 本質上是 JavaScript,卻將產生視覺化的複雜步驟精簡到幾個簡單的函數,大大簡化了JavaScript 操作數據的難度。除了大大減少開發者的工作量外,只需要輸入幾個簡單的數據,就能夠轉換為各種絢麗的圖表。
為什麼使用 D3.js ? Python 、R 語言、Excel 不也能做資料視覺化 ? 畢竟 Python、R 語言並非瀏覽器的預設的開發語言。雖然可以利用套件達到視覺化的效果,但每個語言有他們各自的強項,無法面面俱到。 D3.js 是以 JavaScript 為基礎的函式庫,而 JavaScript 正是瀏覽器引擎預設的腳本語言。
課程特色
- D3.js 可以讓你將手邊的數據資料透過使用 HTML、SVG 及 CSS 繪製出圖表,不光是一般的長條圖、圓餅圖或折線圖,還可以在網頁中做出各式各樣高互動性的動態圖表
- 課程內容亦會穿插實作範例與練習,來強化對於數據視覺呈現與互動的理解
- 學會如何更深入使用 D3.js 等工具來製作視覺化原型以完成設計,從而向觀眾或讀者有效地傳達資訊或見解
- 課程加量不加價。持續更新。
- 教學風格循序漸進、深入淺出、以實例代替抽象,容易吸收。
適合我嗎? 需要哪些課程準備?
適用對象
- 較無基礎但願意勤奮自學「資料視覺化」及「網頁開發」
- 對「資料視覺化」有興趣並稍熟悉 HTML、CSS、JavaScript 者
工具準備
- 本課程將使用初學者易上手的跨平台 Adobe Brackets 做為主要 D3.js 網頁開發環境。而D3.js本身則不需要額外安裝任何框架或是套件。學員皆可自行下載並安裝於任意系統的筆電中進行學習。
知識準備
- 無
課程介紹 (共 16.8 小時)
從零開始,這門課將帶給您五大重點
1️⃣ 基礎前端網頁設計概念和語法
HTML + CSS + JavaScript 是前端網頁必備的技能,這堂課會再以重點精華的形式,帶您了解基礎網頁的構成,以及加深基本語法的熟悉度。
2️⃣ D3.js 重點觀念和 SVG 向量圖形繪製技巧
視覺的東西常常做出來會與我們想像中的不一樣,其實有時候僅是觀念清晰度和語法熟悉的問題罷了。這裡讓您一次就搞懂D3.js 的核心觀念與實際應用方式,如何透過現有手邊的資料快速進行資料視覺化。
3️⃣ 視覺圖形、佈局、互動、地圖繪製,從 基礎 → 進階 → 實作演練
在課程的第八章開始,我將帶您學利用資料來繪製圓餅圖、泡泡圖、長條圖,並建立視覺互動的特效。讓您能很清晰地瞭解從基礎到實際操作的流程。最後透過繪製「台灣登革熱疫情點位置圖」來進行實作演練,從無到有地完成多個屬於您自己的D3 作品!
4️⃣ 常見的資料格式與應用方式
常常聽到人家在講到CSV、JSON、XML 聽都聽不懂?資料交換格式的用法與差異性。這裡通通告訴你。
5️⃣ 網路爬蟲與資料視覺化的親密關係
說到資料視覺化,不免就要提一下「網路爬蟲」。一般我們常見會用 R、Python撰寫一隻網路爬蟲,抓取網路上的「資料」,並將其加以過濾整理,再透過視覺化呈現。在課程的章節裡,將會講解網路爬蟲的基礎原理,並示範快速打造一支網路爬蟲,節省撰寫爬蟲的時間,讓您能專注在資料視覺化的技術上。
講師介紹
![]() |
學歷
經歷
得獎紀錄
|
課程網址 去預覽📈
也許你會有興趣
- 網站前端開發相關線上課程
- 使用 e-mail 訂閱 Soft & Share 內容發布 – 透過 e-mail 提早收到 Soft & Share 發布的好康訊息!
- Soft & Share 特價課程與學習資訊分享 加入這個社團追蹤我們的特價課程與學習訊息
- 追蹤這個 Twitter ,追蹤各種軟體開發和個人成長學習訊息
發表迴響