資料視覺化 - D3 的第一堂課 | WeiYuan

資料視覺化 - D3 的第⼀堂課
2017/06/27 (Wed.)
WeiYuan

site: v123582.github.io
line: weiwei63
§ 全端⼯程師 + 資料科學家
略懂⼀點網站前後端開發技術，學過資料探勘與機器
學習的⽪⽑。平時熱愛參與技術社群聚會及貢獻開源
程式的樂趣。

Outline
§ Introduction to D3.js
§ Environment Setup
§ First D3 example
§ Selection and Append
§ SVG
§ Data Binding
§ Style and Attribute
§ Bar Chart and Plot chart
§ Transition
§ Scale, Axis
§ Chart and C3.js
3

Outline
§ First D3 example
§ SVG
§ Data Binding
§ Transition
§ Scale, Axis
§ Chart and C3.js
4

5Reference: http://blog.infographics.tw/2015/06/three-keys-to-visualization/

6Reference: https://source.opennews.org/articles/what-i-learned-recreating-one-chart-using-24-tools/

§ D3.js is a JavaScript library for manipulating documents based
on data. D3 helps you bring data to life using HTML, SVG, and
CSS. D3’s emphasis on web standards gives you the full
capabilities of modern browsers without tying yourself to a
proprietary framework, combining powerful visualization
components and a data-driven approach to DOM
manipulation.
7
Introduction to D3

§ D3.js is a JavaScript library for manipulating documents based
on data. D3 helps you bring data to life using HTML, SVG, and
CSS. D3’s emphasis on web standards gives you the full
capabilities of modern browsers without tying yourself to a
proprietary framework, combining powerful visualization
components and a data-driven approach to DOM
manipulation.
8
Introduction to D3

Why D3 ?
9
Flexibility Interactivity Pretty

What is SVG ？
§ SVG => Scalable Vector Graphics
11

Hot is data driven ？
§ document.getElements() + foo loop
§ Data Binding to DOM
12

D3 Example？
§ Over 2000 D3.js Examples and Demos
§ D3 Gallery
§ 資料視覺化
§ Data Visualization
13

Bubble Chart
14
[
[1, 0.3, 0, 0.8, 0, 0.2, 1, 0.5, 0, 0.75],
[0.3, 1, 0.5, 0.2, 0.4, 0.3, 0.8, 0.1, 1, 0],
[0, 0.5, 1, 0.4, 0, 0.9, 0, 0.2, 1, 0.3],
[0.8, 0.2, 0.4, 1, 0.3, 0.4, 0.1, 1, 0.2, 0.9],
[0, 0.4, 0, 0.3, 1, 0.1, 0.4, 0, 0.6, 0.7],
[0.2, 0.3, 0.9, 0.4, 0.1, 1, 0, 0.1, 0.4, 0.1],
[1, 0.8, 0, 0.1, 0.4, 0, 1, 0.5, 0, 1],
[0.5, 0.1, 0.2, 1, 0.1, 0, 0.5, 1, 0, 0.4],
[0, 1, 1, 0.2, 0.6, 0.4, 0, 0, 1, 0.6],
[0.75, 0, 0.3, 0.9, 0.7, 0.1, 1, 0.4, 0.6, 1]
]

Prerequisite knowledge
§ Must: Javascript、HTML
§ Optinal: CSS、SVG
17

Prerequisite knowledge
18Reference: http://blog.csdn.net/tianxuzhang/article/details/11317667

Outline
§ First D3 example
§ SVG
§ Data Binding
§ Transition
§ Scale, Axis
§ Chart and C3.js
19

Environment Setup
§ 1. unzip Example.zip
§ 2. Create index.html inside Example/
§ 3. Create index.html and type:
20
1
2
3
4
5
<body></body>
<script src="d3.min.js"></script>
<script>
d3.select("body").text("Hello World!");
</script>

Environment Setup
§ 1. Download D3.js (https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js)
§ 2. Create index.html and type:
21
1
2
3
4
5
<body></body>
<script src="d3.min.js"></script>
<script>
d3.select("body").text("Hello World!");
</script>

Outline
§ First D3 example
§ Selection
§ SVG
§ Data Binding
§ Transition
§ Scale, Axis
§ Chart and C3.js
22

First D3 Example
23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Environment Setup
<script src="//d3.min.js"></script>
# JavaScript Section
<script type="text/javascript">
## Data Binding
## Data Rendering
</script>
1. D3 object
2. select and append
3. data binding
4. data rendering

First D3 Example
24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
## Data Binding
var death_rate = [['越南', 24.26],['阿魯巴', 17.48],['關島', 10.01]];
div_selection = d3.select("body").selectAll("div");
div_data_bind = div_selection.data(death_rate);
div_set = div_data_bind.enter().append("div");
div_set = div_data_bind.exit().remove();
div_set.text(function(d,i) { return i + " / " + d[0];});
Reference: http://blog.infographics.tw/2015/03/d3js-the-introduction/

First D3 Example
25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
## Data Drawing
div_set.style("height", "20px");
div_set.style("background", "red");
div_set.style("margin", "5px");
div_set.style("width", function(d,i) { return (d[1] * 10)+"px"; });
Reference: http://blog.infographics.tw/2015/03/d3js-the-introduction/

Try it!
26
§ #練習：試著畫⼀個 n 筆資料的⾧條圖。

Try it!
27
1
2
3
4
5
6
7
8
9
10
11
12
13
14
## Data Binding
var dataset = [1, 2, 3, 4, 3, 2, 1];
d3.select(______).selectAll(______).data(______)
.enter().append(______)
.exit().remove();
## Data Drawing
d3.select(______).selectAll()
.style("width", "20px")
.style("display", " inline-block")
.style("margin-right", "2px")
.style("background-color", "RoyalBlue")
.style('height', function(d){
return ______ + 'px’
})

Outline
§ First D3 example
§ SVG
§ Data Binding
§ Transition
§ Scale, Axis
§ Chart and C3.js
28

D3 Selection
29
1. D3 object
2. select
3. append
4. data binding
5. data rendering
Reference: http://www.open-open.com/lib/view/open1438439248706.html

Select and Append
30
1
2
3
d3.select("body")
.append("p")
.text("New paragraph!");
1. D3 object
3. data binding
4. data rendering
1
2
3
var body = d3.select("body");
var p = body.append("p");
p.text("New paragraph!");
1 d3.select("body").append("p").text("New paragraph!");

Try it!
31
§ #練習：試著使⽤ D3 印出字串 “Hello World”。

Try it!
32
§ #練習：完成以下⼯作，
1. 插⼊⼀個紅⾊的 h1 標題「我是標題」
2. 插⼊⼀個藍⾊的 p 段落「我是段落…」
3. 把網⾴背景變成⿊⾊

Try it!
33
§ #練習：插⼊ [ 5, 10, 15, 20, 25 ] 數字到 div，其中⼤於 15 的數
字顯⽰為紅⾊。

Outline
§ First D3 example
§ SVG
§ Data Binding
§ Transition
§ Scale, Axis
§ Chart and C3.js
34

SVG
§ SVG is used to define vector-based graphics for the Web
§ SVG is a W3C recommendation
35

What is the relationship between D3 and SVG?
36
vector-based graphics
structured
dynamic
Flexibility
Interactivity
Versatility

How to use SVG ?
37
1 <{shapes tag} {x} {y} {width} {height} {style}>
§ shapes tag
§ x, y, width, height, rx, cx, cy, r
§ style
§ More SVG Element: reference

Square Rectangle
38
1
2
3
4
5
6
<svg width="100%" height="105">
<rect x="2" y="2" width="100" height="100"
style="stroke: #333; stroke-width: 3; fill: FireBrick;"/>
<rect x="120" y="2" width="200" height="100"
style="stroke: #333; stroke-width: 3; fill: LightSkyBlue;"/>
</svg>
§ reac tag
§ x, y, width, height
§ style
§ fill, stroke

Fillet Rectangle
39
1
2
3
4
5
6
<rect x="2" y="2" width="100" height="100" rx="10"
style="stroke: #333; stroke-width: 3; fill: FireBrick;"></rect>
<rect x="120" y="0" width="200" height="100" rx="40" ry="10"
style="stroke: #333; stroke-width: 3; fill: red;"></rect>
</svg>
§ reac tag
§ x, y, width, height, rx
§ style
§ fill, stroke

SVG: Circle
40
1
2
3
4
5
6
7
8
9
<circle cx="100" cy="51" r="50"
stroke="#333" stroke-width="3" fill="SeaShell"/>
</svg>
<svg width="100%" height="100%">
<circle style="cx:220;cy:45;r:10;fill:red;stroke:green"/>
</svg>
§ circle tag
§ cx, cy, rw
§ style
§ fill, stroke

The attribute of SVG
样式/属性含义可能的值
fill 填充颜⾊值
stroke 描边颜⾊值
stroke-width 描边宽度数字（通常以像素为单
位）
opacity 不透明度 0.0（完全透明）和1.0
（完全不透明）之间的
数值
font-family 字体 text标签特有，CSS字体
font-size 字体⼤⼩ text标签特有，数字
text-anchor 对⻬⽅式 text标签特有，
left/center/right
41

The attribute of SVG
42
§ Note. 其中顏色可以被指定為：
1. 命名的顏色 green
2. 十六進制值＃3388aa或＃38A
3. RGB 值 RGB（10,150,20）
4. RGB 與 Alpha 透明 RGBA（10,150,20,0.5）

Try it!
43
§ #練習：利⽤ SVG 畫⼀個紅⾊的圓。

Try it!
44
§ #練習：承上題，紅⾊圈圈外⾯加⼀個⽅框框

Try it!
45
§ #練習：利⽤ SVG 畫⼀個臉。

Use D3 to SVG (attr)
46
1
2
3
4
<circle cx="100" cy="51" r="50"
stroke="#333" stroke-width="3" fill="SeaShell"/>
</svg>
1
2
3
4
5
6
7
8
9
//Create SVG element
var svg = d3.select("body")
.append("svg")
.append("circle")
.attr("cx", 100)
.attr("cy", 50);
.attr("r", 50);
.attrs({'stroke': '#333'; 'stroke-width': 3; 'fill':
'SeaShell';})

Use D3 to SVG (div)
47
1
2
3
4
<circle style="cx:220;cy:45;r:10;fill:red;stroke:green"/>
</svg>
1
2
3
4
5
6
7
8
9
//Create SVG element
var svg = d3.select("body")
.append("svg")
.append("circle")
.style("cx", 100)
.style("cy", 50);
.style("r", 50);
.styles({'stroke': '#333'; 'stroke-width': 3; 'fill':
'SeaShell';})

Try it!
48
§ #練習：利⽤ SVG 畫⼀個紅⾊的圓且外⾯加⼀個⽅框框。

Try it!
49
§ #練習：利⽤ D3 把所有圓圈變紅。

Try it!
50
§ #練習：承上題，要怎麼只把眼睛的外圈變紅？

Try it!
51
§ #練習：承上題，加⼀個臉的輪廓。

Try it!
52
§ #練習：我們在 first d3 example 使⽤過 div 來話⾧條圖，現在
試著改成⽤ SVG + D3 畫畫看。

Try it!
53
§ #練習：承上題，改成直的⾧條圖。

Try it!
54
§ #練習：試試看畫下列越來越⼤的圓。

Try it!
55
§ #練習：畫⼀個點散布圖。

Outline
§ First D3 example
§ SVG
§ Data Binding
§ Transition
§ Scale, Axis
§ Chart and C3.js
56

Data Binding
57
1
2
3
4
5
6
7
8
9
10
11
// Data
var dataset = [ 5, 10, 15, 20, 25 ];
// Selectionp =
d3.select("body").selectAll("p");
// binding
p.data(dataset)
.enter()
.append("p")
.text("New paragraph!");
1. D3 object
3. data binding
4. data rendering

58Reference: http://ptamarit.com/slides-data-viz-web-d3/en/#/

59Reference: https://www.slideshare.net/kurotanshi/d3-48180820

Data Binding with Function Callback
62
1
2
3
4
5
6
7
8
9
10
11
// Data
var dataset = [ 5, 10, 15, 20, 25 ];
// Selectionp =
d3.select("body").selectAll("p");
// binding
p.data(dataset)
.enter()
.append("p")
.text(function(d,i){return d + i});
1. D3 object
3. data binding
4. data rendering

Outline
§ First D3 example
§ SVG
§ Data Binding
§ Transition
§ Scale, Axis
§ Chart and C3.js
63

Outline
§ First D3 example
§ SVG
§ Data Binding
§ Transition
§ Scale, Axis
§ Chart and C3.js
64

Outline
§ First D3 example
§ SVG
§ Data Binding
§ Transition
§ Scale, Axis
§ Chart and C3.js
65

Outline
§ First D3 example
§ SVG
§ Data Binding
§ Transition
§ Scale, Axis
§ Chart and C3.js
66

Outline
§ First D3 example
§ SVG
§ Data Binding
§ Transition
§ Scale, Axis
§ Chart and C3.js
67

Thanks for listening.
2017/06/27 (Wed.) 資料視覺化 - D3 的第⼀堂課
Wei-Yuan Chang
v123582@gmail.com
v123582.github.io

資料視覺化 - D3 的第一堂課 | WeiYuan

Recommended

Recommended

More Related Content

Similar to 資料視覺化 - D3 的第一堂課 | WeiYuan

Similar to 資料視覺化 - D3 的第一堂課 | WeiYuan (20)

More from Wei-Yuan Chang

More from Wei-Yuan Chang (20)

Recently uploaded

Recently uploaded (20)

資料視覺化 - D3 的第一堂課 | WeiYuan