iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

D3.js新手開發基本圖表 系列

身為一個從來沒寫過D3.js的前端工程師,為學習開發資料視覺化圖表,利用這次鐵人賽的機會當作自我挑戰。以阿貝拉(Andrew Abela)的圖表指南中將依據不同資料類型所歸類的21種圖表為目標,嘗試使用D3.js各別挑選獨立主題完成開發練習。

鐵人鍊成 | 共 30 篇文章 | 42 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day01 - D3.js學前準備

一、本系列介紹及範圍 本系列的標題「D3.js新手開發基本圖表」又是新手又是基本的,看來預防針打的很足(?)。在這裡「新手」指的是我自己,在開始本系列之前,我只...

2018-10-15 ‧ 由 Thunder 分享
DAY 2

Day02 圖表學習筆記整理(1)

一、關於學習筆記 接下來的「圖表學習筆記整理」預計會有兩到三篇文章,內容主要是從前一篇提到的「哈佛教你做出好圖表」這本書中,我閱讀之後依我自己的理解整理、並補充...

2018-10-16 ‧ 由 Thunder 分享
DAY 3

Day03 圖表學習筆記整理(2)

一、圖表結構 圖表所應該具備的原素(大部份或者全部)如下: 1.標題 2.副標題 3.視覺區域(視覺圖示、座標軸、標、圖說、圖例) 3.來源出處 我們可以將必要...

2018-10-17 ‧ 由 Thunder 分享
DAY 4

Day04 初探SVG

一、Canvas和SVG Canvas和SVG都是html5用於繪圖的元素,都已經廣範被瀏覽器所支援。Canvas是屬於點陣圖、而SVG是屬於向量圖;我們都知道...

2018-10-18 ‧ 由 Thunder 分享
DAY 5

Day05 SVG元素繪製與樣式

一、文字 在SVG中可以使用<text>標籤繪製文字,例: <text x=“200” y="10" dx="5...

2018-10-19 ‧ 由 Thunder 分享
DAY 6

Day06 D3 hello word

一、hello world D3.js和一般的javascript函式庫一樣,直接用CDN方式引入html即可使用。比較要注意的是所使用的版本,因為v3.x和v...

2018-10-20 ‧ 由 Thunder 分享
DAY 7

Day07 D3 資料綁定的理解(1)

一、基本理解 今天的主題主要是圍繞在我對於D3的基本運作的理解方式。 首先來看,D3的全名是"Data-Driven Documents",...

2018-10-21 ‧ 由 Thunder 分享
DAY 8

Day08 D3 資料綁定的理解(2)

一、資料綁定(Data-Join)的data() 前一篇提到D3的資料綁定(Data-Join),今天要針對其中的**data()**方法來討論。 這裡我們將前...

2018-10-22 ‧ 由 Thunder 分享
DAY 9

Day09 練習題準備 - 圖表類型的理解

D3.js的學習對我來說是比較抽象一點,所以我一開始的學習策略,就打算一開始只學習比較基本的觀念和函式的操作,接著就直接找練習題實作邊做邊學。 圖表類型我是參考...

2018-10-23 ‧ 由 Thunder 分享
DAY 10

Day10 練習 - 直式長條圖(1)

一、使用<rect>元素繪製長條圖 第一個練習先從簡單化的資料來開始,這邊有一組數值,繪製出直式長條圖即算是完成。 var dataSet = [7...

2018-10-24 ‧ 由 Thunder 分享