forked from thinkh/d3tutorial
-
Notifications
You must be signed in to change notification settings - Fork 0
/
barchart07_final.html
126 lines (105 loc) · 3.48 KB
/
barchart07_final.html
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="../web_modules/d3/d3.js"></script>
<style type="text/css">
body {
width: 800px;
margin: 25px auto;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
rect {
fill: steelblue;
fill-opacity: 0.8;
}
rect:hover {
fill-opacity: 1;
}
.axis {
font-size: smaller;
}
</style>
</head>
<body>
<h1>Student's First BarChart</h1>
<div>
<strong>Filter:</strong>
<label><input type="checkbox" name="US" value="1" id="filter-us-only" />US only</label>
</div>
<script type="text/javascript">
const margin = {top: 40, bottom: 10, left: 120, right: 20};
const width = 800 - margin.left - margin.right;
const height = 600 - margin.top - margin.bottom;
// Creates sources <svg> element
const svg = d3.select('body').append('svg')
.attr('width', width+margin.left+margin.right)
.attr('height', height+margin.top+margin.bottom);
// Group used to enforce margin
const g = svg.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
// Global variable for all data
let data;
// Scales setup
const xscale = d3.scaleLinear().range([0, width]);
const yscale = d3.scaleBand().rangeRound([0, height]).paddingInner(0.1);
// Axis setup
const xaxis = d3.axisTop().scale(xscale);
const g_xaxis = g.append('g').attr('class','x axis');
const yaxis = d3.axisLeft().scale(yscale);
const g_yaxis = g.append('g').attr('class','y axis');
/////////////////////////
d3.json('weather.json').then((json) => {
data = json;
update(data);
});
function update(new_data) {
//update the scales
xscale.domain([0, d3.max(new_data, (d) => d.temperature)]);
yscale.domain(new_data.map((d) => d.location.city));
//render the axis
g_xaxis.transition().call(xaxis);
g_yaxis.transition().call(yaxis);
// Render the chart with new data
// DATA JOIN use the key argument for ensurign that the same DOM element is bound to the same data-item
const rect = g.selectAll('rect').data(new_data, (d) => d.location.city).join(
// ENTER
// new elements
(enter) => {
const rect_enter = enter.append('rect').attr('x', 0);
rect_enter.append('title');
return rect_enter;
},
// UPDATE
// update existing elements
(update) => update,
// EXIT
// elements that aren't associated with data
(exit) => exit.remove()
);
// ENTER + UPDATE
// both old and new elements
rect.transition()
.attr('height', yscale.bandwidth())
.attr('width', (d) => xscale(d.temperature))
.attr('y', (d) => yscale(d.location.city));
rect.select('title').text((d) => d.location.city);
}
//interactivity
d3.select('#filter-us-only').on('change', function() {
// This will be triggered when the user selects or unselects the checkbox
const checked = d3.select(this).property('checked');
if (checked === true) {
// Checkbox was just checked
// Keep only data element whose country is US
const filtered_data = data.filter((d) => d.location.country === 'US');
update(filtered_data); // Update the chart with the filtered data
} else {
// Checkbox was just unchecked
update(data); // Update the chart with all the data we have
}
});
</script>
</body>
</html>