| Academic Major | % of Students |
|---|---|
| Engineering & CS | 39 |
| Math & Stats | 18 |
| Econ & Social Science | 27 |
| Business & Mgmt | 6 |
| Liberal Arts | 8 |
| Natural Science | 2 |
Scale
Data
39
18
27
6
8
2
% of 35 students in the MSIA program
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
Array
24
var list = [24];
Group
svg
Selection
d3.select('svg')
++ methods
Group
svg
Selection
d3.select('svg')
++ methods
d3.selectAll('div')
Group
div
Selection
++ methods
div
div
Group
svg
Selection
d3.select('svg').datum(24)
++ methods
24
Group
svg
Selection
d3.select('svg').datum(24).text(function(d) {return d})
++ methods
24
Group
`svg`
Selection
d3.select('svg').datum(24).append('p').text(function(d) {return d})
++ methods
24
p
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}]
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
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
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
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
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
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
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
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