Contents
使用 D3.js 設計和建構精美的資料視覺化 – D3 程式庫( library )的密集訓練。
從這 6.5 小時的課程,你會學到
- 了解 D3 的基本建構模組
- 獲得廣泛的知識,學習如何創建 14 種不同的視覺化
- 評論現有的可視覺化並發明更好的設計來顯示數據
- 解釋 D3 社群的開源代碼,以便在您自己的專案中使用
- 掌握 D3 的進階工具,建構等值線圖( chorpleth maps )、畫筆( brushes )、工具提示( tooltips )和佈局( layouts )
- 開發實質性的 Web 應用程式,同時在頁面上顯示多個視覺化
- 用引人注目的草圖闡明原始抽象的想法
要求
- 學生應該對 HTML、CSS 和 JavaScript 有很好的理解
- 學生應該知道如何使用 jQuery 與文件物件模型( Document Object Model,DOM)進行互動
課程說明
歡迎來到 “ 用 D3.js 掌握資料視覺化 ”!
本課程將教你建構幾乎任何你能想像到的視覺化。此課程採用最新版本的 D3 – 版本6.x。
課程大綱
在本課程的第一階段,我將建立你對 D3 的了解,並介紹資料視覺化中的一些最基本的主題。你將:
- 了解 SVG 是什麼以及如何使用 D3。
- 了解 D3 如何將形狀與資料數據相關聯。
- 編寫規模( scales )、軸( axes )和標籤( labels )以進行一些基本的視覺化。
- 使用 D3 更新模式在我們的數據更改時移動 SVG 的位置。
- 通過向頁面添加事件來處理用戶互動資訊。
- 將圖例( legends )、工具提示( tooltips )和滑塊( sliders )添加到視覺化的對象中。
本課程還將側重於資料視覺化設計,幫助你更好地決定如何編寫程式,並教你如何對其他人辯證你的決策。你將學習如何為你正在處理的資料選擇正確的管道建立完全獨特的可視化。
在本課程的第二階段,我將帶你加速學習 12 個新的視化。你將獲得 D3 廣泛的知識,跟著我的說明瀏覽 D3 社區成員編寫的程式碼。 我將介紹 D3 佈局( layouts ),並了解如何在 D3 建構每個視覺化:
- 線圖 ( Line Charts )
- 區域圖表 ( Area Charts )
- 堆積區域圖表 ( Stacked Area Charts )
- 餅圖 ( Pie Charts )
- 甜甜圈圖表 ( Donut Charts )
- 文字雲 ( Wordclouds )
- 等值線圖 ( Choropleth Maps )
- 節點連結圖 ( Node-Link Diagrams )
- 樹圖 ( Tree Diagrams )
- 樹狀圖 ( Treemaps )
- 圓組合包裝圖 ( Circle Packs )
- 旭日圖 ( Sunburst Plots )
本課程的這一部分還將教你自己尋找新的視覺化的技巧,調整開源程式碼以適應你自己的資料。
在本課程的最後階段,我將展示正確的檔案結構,用於一次管理頁面上多個視覺化表現。你將能夠創建視覺化,他們可相互溝通,可以連結用戶介面做多個不同圖表的互動 多個不同的圖形。你還將學習如何通過滑鼠的拖拉使用 D3 中的畫筆( brushes )來選擇圖表上的區域。
課程將做的專案
該課程將包括 4 個專案,藉由這些專案將讓你使用真實資料做 D3 技能的練習:
- 一個簡單的條形圖( bar chart ),顯示小型咖啡連鎖店的收入增長。
- 更新氣泡圖,從 Gapminder 複製著名的視覺化。
- 互動式折線圖,顯示加密貨幣歷史價格隨時間的變化。
- 大型企業集團公司的資料儀表板。
隨著課程的進展,每個專案將逐漸變得更加複雜。
我應該參加這個課程嗎?
如果想獲得 D3 嚴謹的知識,學生應該參加本課程,其中涵蓋了廣泛的不同主題。
在參加本課程之前,學生應先具有 JavaScript、HTML、CSS 和 jQuery 經驗。
目標受眾
- 任何熱衷於資料處理的人
- 任何對數資料視覺化設計感到好奇的人
- 任何想要使用 D3js 建構複雜互動式網站的人
講師簡介
Adam Janes 資料視覺化工程師
嗨!我的名字是 Adam,我是來自英國的網路開發人員。我在哈佛大學學習經濟學和計算機科學,我熱衷於多方探索有趣的資料來源。
從小型 SaaS 公司到大型非政府組織,我利用自己在資料視覺化的專業知識,為許多客戶提供設計指導和技術幫助。
我希望很快能在我的一門課程中見到你。
英文字幕:有
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To
- 點選這個✨優惠連結✨ ( NT390 起特價中 ) | Udemy 永久擁有課程 ( 在電腦瀏覽器登入,點選“優惠連結”後再回想要的課程介紹中點選“報名參加課程”即可取得 )
- Udemy 現在越來越多課程有中文字幕,請參考 Soft & Share 中文線上課程
- 手機上點選優惠連結看到的價格比電腦上看到的貴
- $代表當地貨幣, 如在台灣為 NT
- 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現
報名參加課程

也許你會有興趣
- 更多資料視覺化相關線上課程介紹
- D3js 相關線上課程
- ★英語學習地圖 – 練好英文是最大的學習槓桿
- 如何找工作學習地圖 – 找工作不要靠運氣!
發表迴響