-
Notifications
You must be signed in to change notification settings - Fork 16
/
gapminder-update.js
59 lines (52 loc) · 1.53 KB
/
gapminder-update.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
function setup_inputs(data, scales) {
d3.select("#country_select")
.on("change", (ev) => update_continents(ev, data, scales))
}
function visualize(data) {
data = data.filter(d => d.year == year)
let scales = make_scales(data)
initialize(data, year, scales);
setup_inputs(data, scales)
}
function initialize(data, year, scales) {
d3.select("svg")
.selectAll("circle")
.data(data, d => d.country).enter()
.append("circle")
.attrs({
cx: d => scales.x(d.lpop),
cy: d => scales.y(d.life_expectancy),
fill: d => scales.fill(d.continent)
})
}
function update_continents(ev, data, scales) {
continents = $(ev.target).val()
let subset = data.filter(d => continents.indexOf(d.continent) != -1);
let selection = d3.select("svg").selectAll("circle")
.data(subset, d => d.country)
selection.enter()
.append("circle")
.attrs({
cx: d => scales.x(d.lpop),
cy: d => scales.y(d.life_expectancy),
fill: d => scales.fill(d.continent),
})
selection.exit().remove()
}
function make_scales(data) {
return {
y: d3.scaleLinear()
.domain(d3.extent(data.map(d => d.life_expectancy)))
.range([500, 0]),
x: d3.scaleLinear()
.domain(d3.extent(data.map(d => d.lpop)))
.range([0, 700]),
fill: d3.scaleOrdinal()
.domain([... new Set(data.map(d => d.continent))])
.range(d3.schemeSet2)
}
}
let year = 1965,
continents = ["Americas", "Europe", "Africa", "Asia", "Oceania"];
d3.csv("gapminder.csv", d3.autoType)
.then(visualize);