Intro to D3
Intro to D3
Components of a graph
| Academic Major | % of Students |
|---|---|
| Engineering & CS | 39 |
| Math & Stats | 18 |
| Econ & Social Science | 27 |
| Business & Mgmt | 6 |
| Liberal Arts | 8 |
| Natural Science | 2 |
Components of a graph
Scale
Data
Data
39
18
27
6
8
2
% of 35 students in the MSIA program
Scale
ABC...D3
- Select DOM Node
- Add data to DOM Node
- Represent data as a visual
- Style data visual
1. Select DOM Node
d3.select('svg')document.getElementsByTagName('svg')
document.querySelector('svg')Same, Same but different
<svg>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</svg>index.html
main.js
1. Select DOM Node
Array
24
var list = [24];
Group
svg
Selection
d3.select('svg')
++ methods
1. Select DOM Node
Group
svg
Selection
d3.select('svg')
++ methods
d3.selectAll('div')
Group
div
Selection
++ methods
div
div
1. Select DOM Node
2. Add Data
Group
svg
Selection
d3.select('svg').datum(24)
++ methods
24
3. Show/Represent the Data
Group
svg
Selection
d3.select('svg').datum(24).text(function(d) {return d})
++ methods
24
3. Show/Represent the Data
Group
`svg`
Selection
d3.select('svg').datum(24).append('p').text(function(d) {return d})
++ methods
24
p
3. Show/Represent the Data
All the Data
var list = [24];
var list = [23, 43, 50, 16]
var list = [{major: 'Engineering', students: 13.65 },
{major: 'Mathematics', students: 6.3},
{major: 'Economics', students: 9.45}]
All the Data
Group
div
Selection
d3.select('svg').datum([24,23,52])
++ methods
d3.select('div').selectAll('h3').data([24,23,52]).text(function(d){return d})
h3
h3
h3
24
23
52
Data > DOM Nodes
Group
svg
Selection
++ methods
d3.select('div').selectAll('h3')
.data([24,23,52, 29, 43]).text(function(d){return d})
h3
h3
h3
24
23
52
29
43
(Enter) Data
Group
div
Selection
++ methods
d3.select('div').selectAll('h3')
.data([24,23,52, 29, 43]).text(function(d){return d})
.enter()
h3
h3
h3
24
23
52
h3
h3
29
43
Update DOM
Group
svg
Selection
++ methods
d3.select('svg').selectAll('h3')
.data([24,23,52]).text(function(d){return d})
.enter().append('h3')
h3
h3
h3
24
23
52
h3
h3
29
43
Data < DOM Elements
Group
svg
Selection
++ methods
d3.select('svg').selectAll('h3')
.data([24,23,52]).text(function(d){return d})
h3
h3
h3
24
23
52
h3
h3
(Exit) Data
Group
div
Selection
++ methods
d3.select('div').selectAll('h3')
.data([24,23,52, 29, 43]).text(function(d){return d})
.exit()
h3
h3
h3
24
23
52
h3
h3
(Exit) Data
Group
div
Selection
++ methods
d3.select('div').selectAll('h3')
.data([24,23,52, 29, 43]).text(function(d){return d})
.exit()
h3
h3
h3
24
23
52
h3
h3
(Exit) Data
Group
div
Selection
++ methods
d3.select('div').selectAll('h3')
.data([24,23,52, 29, 43]).text(function(d){return d})
.exit().remove()
h3
h3
h3
24
23
52
bit.ly/d3barCharts
Intro to D3 *finally*
By shortdiv
Intro to D3 *finally*
- 511
