3. 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
4. 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
4
7. § 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
8. § 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
19. 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
19
28. 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
28
29. 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
30. Select and Append
30
1
2
3
d3.select("body")
.append("p")
.text("New paragraph!");
1. D3 object
2. select and append
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!");
34. 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
34
35. SVG
§ SVG is used to define vector-based graphics for the Web
§ SVG is a W3C recommendation
35
36. What is the relationship between D3 and SVG?
36
vector-based graphics
structured
dynamic
Flexibility
Interactivity
Versatility
37. 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
56. 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
56
57. 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
2. select and append
3. data binding
4. data rendering
62. 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
2. select and append
3. data binding
4. data rendering
63. 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
63
64. 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
64
65. 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
65
66. 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
66
67. 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
67