• 課程時長

    15 小時 59 分

  • 課程級別

    通用

  • 授課語言

    中文

這堂課你將會學到

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

章節目錄

  • 1

    第 1 章 D3開發環境與網頁前端概覽

    • 單元 1 - 何謂資料視覺化

    • 單元 2 - 資料視覺化工具概覽

    • 單元 3 - 為何用D3js做資料視覺化

    • 單元 4 - 網頁構成要素與前端概覽

    • 單元 5 - 何謂HTML

    • 單元 6 - 如何撰寫HTML

    • 單元 7 - 第一個HTML小試身手

    • 單元 8 - 本章節-課程投影片
  • 2

    第 2 章 網頁前端重點精華HTML,CSS

    • 單元 1 - 本章節-課程投影片

    • 單元 2 - HTML中的基本內文

    • 單元 3 - HTML中的列表與表格

    • 單元 4 - HTML中的超鏈結與圖

    • 單元 5 - 在HTML中加入CSS

    • 單元 6 - 何謂CSS

    • 單元 7 - 如何撰寫CSS

    • 單元 8 - CSS中的顏色

    • 單元 9 - CSS中的字體

    • 單元 10 - CSS中的段落文字排版

    • 單元 11 - CSS中基本的四種選擇器

    • 單元 12 - CSS中進階的選擇器

    • 單元 13 - CSS中的優先權
  • 3

    第 3 章 網頁前端重點精華JavaScript

    • 單元 1 - 本章節-課程投影片

    • 單元 2 - 何謂JavaScript

    • 單元 3 - 使用Google Chrome來檢查網頁元素

    • 單元 4 - JavaScript資料型態-數值

    • 單元 5 - JavaScript變數

    • 單元 6 - JavaScript資料型態-布林

    • 單元 7 - JavaScript資料型態-字串

    • 單元 8 - JavaScript資料型態-陣列

    • 單元 9 - JavaScript資料型態轉換

    • 單元 10 - 如何連接JavaScript腳本

    • 單元 11 - JavaScript資料型態-何謂函式

    • 單元 12 - JavaScript資料型態-函式的值傳遞

    • 單元 13 - JavaScript資料型態-函式練習
  • 4

    第 4 章 D3基本介紹與向量圖SVG基礎

    • 單元 1 - 本章節-課程投影片

    • 單元 2 - 如何開始D3.js

    • 單元 3 - D3.js語法介紹

    • 單元 4 - D3.js語法初試身手

    • 單元 5 - D3.js語法比一比

    • 單元 6 - 何謂SVG

    • 單元 7 - SVG座標系統與基本形狀繪製

    • 單元 8 - 兩種圖形繪製方法練習

    • 單元 9 - 認識SVG線上開發小工具與圖層概念

    • 單元 10 - 多個矩形繪製練習

    • 單元 11 - 陽春版長條圖繪製練習

    • 單元 12 - 陽春版折線圖繪製練習
  • 5

    第 5 章 D3與資料集

    • 單元 1 - 本章節-課程投影片

    • 單元 2 - 資料集概覽

    • 單元 3 - IF條件式與比較運算子

    • 單元 4 - IF條件式與比較運算子實作練習

    • 單元 5 - 資料交換格式-CSV

    • 單元 6 - 使用D3讀取CSV格式實作練習

    • 單元 7 - 資料交換格式-XML

    • 單元 8 - JSON與Object-part1

    • 單元 9 - JSON與Object-part2

    • 單元 10 - 如何使用D3讀取JSON格式

    • 單元 11 - 使用D3讀取JSON格式實作練習

    • 單元 12 - 改成長條圖小練習

    • 單元 13 - 打造一隻網路爬蟲:以PTT為例-part1

    • 單元 14 - 打造一隻網路爬蟲:以PTT為例-part2

    • 單元 15 - 打造一隻網路爬蟲:以PTT為例-part3
  • 6

    第 6 章 D3基礎(綁定)

    • 單元 1 - 本章節-課程投影片

    • 單元 2 - 綁定資料與視覺元素

    • 單元 3 - 圖解D3綁定三種狀態

    • 單元 4 - 各司其職:讓綁定與繪製各自分工

    • 單元 5 - 動手時間:綁定與繪製小練習

    • 單元 6 - 透過綁定與繪製建立簡單長條圖表

    • 單元 7 - 在簡單長條圖中加入小互動
  • 7

    第 7 章 D3基礎(比例尺)

    • 單元 1 - 本章節-課程投影片

    • 單元 2 - 何謂比例尺

    • 單元 3 - 線性比例尺小練習

    • 單元 4 - 如何找出資料中的最大最小值

    • 單元 5 - 序數比例尺

    • 單元 6 - 認識填色序數比例尺

    • 單元 7 - 日期比例尺

    • 單元 8 - 實作無軸線版2D散佈圖

    • 單元 9 - 軸線構成要素

    • 單元 10 - 如何畫出軸線

    • 單元 11 - 編輯軸線刻度
  • 8

    第 8 章 D3基礎(互動)

    • 單元 1 - 本章節-課程投影片

    • 單元 2 - 資料彙整處理

    • 單元 3 - 結合圖表的資料彙整操作

    • 單元 4 - D3綁定事件

    • 單元 5 - 實作按鈕事件與圖表更新

    • 單元 6 - 座標軸同步更新修改

    • 單元 7 - 實作下拉式選單事件與圖表更新

    • 單元 8 - 加入圖表更新動畫

    • 單元 9 - 基礎提示框

    • 單元 10 - 自製進階提示框

    • 單元 11 - 加入時間互動性效果預覽

    • 單元 12 - 資料欄位處理

    • 單元 13 - 圖表使用其他資料集

    • 單元 14 - 散布圖加入時間互動練習
  • 9

    第 9 章 D3佈局(Layout)

    • 單元 1 - 本章節-課程投影片

    • 單元 2 - 何謂佈局(Layout)

    • 單元 3 - 圓餅圖(Pie Chart)佈局介紹

    • 單元 4 - 如何用svg繪製圓餅圖

    • 單元 5 - 如何調整圓餅圖內容呈現

    • 單元 6 - 泡泡圖(Pack Chart)佈局介紹

    • 單元 7 - 資料巢狀化

    • 單元 8 - 使用泡泡圖佈局

    • 單元 9 - 繪製完泡泡圖
  • 10

    第 10 章 D3地圖(Geo)

    • 單元 1 - 載入地圖四個步驟

    • 單元 2 - 如何載入GeoJSON地圖-以世界地圖為例

    • 單元 3 - GeoJSON與TopoJSON比較

    • 單元 4 - 如何載入TopoJSON地圖-以台灣地圖為例

    • 單元 5 - 繪製台灣登革熱疫情點位置圖

    • 單元 6 - 繪製台灣登革熱疫情面量圖

    • 單元 7 - 範例程式碼下載區