-
Notifications
You must be signed in to change notification settings - Fork 0
/
svgBarGraph_InteractivityTrial.html
231 lines (203 loc) · 7.63 KB
/
svgBarGraph_InteractivityTrial.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="d3/d3.js"></script>
<style type="text/css">
/* Nothing here yet*/
</style>
</head>
<body>
<button id="hello" type="button">YAS CLICK HERE TO ADD </button> <br>
<button id="goodbye" type="button">YAS CLICK HERE TO REMOVE </button>
<script type="text/javascript">
var wid = 600;
var hei = 250;
/* dataset holds an array of objects, and object has a key and value.
In which to reference it, we just call data.value on each "data" piece. */
var dataset = [ { key: 0, value: 5 },
{ key: 1, value: 10 },
{ key: 2, value: 13 },
{ key: 3, value: 19 },
{ key: 4, value: 21 },
{ key: 5, value: 25 },
{ key: 6, value: 22 },
{ key: 7, value: 18 },
{ key: 8, value: 15 },
{ key: 9, value: 13 },
{ key: 10, value: 11 },
{ key: 11, value: 12 },
{ key: 12, value: 15 },
{ key: 13, value: 20 },
{ key: 14, value: 18 },
{ key: 15, value: 17 },
{ key: 16, value: 16 },
{ key: 17, value: 18 },
{ key: 18, value: 23 },
{ key: 19, value: 25 } ];
/* ORDINAL means having an inherent order to them (ie frosh, sophomore, jr, sr). For ordinal, it's domain is determined by an order that's already there, ie since we have 20 items, it will order ordinally from 0-19. RANGEBANDS do a mathematical calculation for us i.e. (wid-0)/xScale.domain().length in this case -> this ends up equally the bands to be 30 wide. The # to the right of the comma is decrease spacing by 5% and the output is rounded to the nearest whole pixel. */
var xScale = d3.scale.ordinal()
.domain( d3.range(dataset.length))
.rangeRoundBands([0, wid], 0.05);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(data) {return data.value; }) ])
.range([0, hei]);
var key = function(data) { return data.key; };
var svg = d3.select("body")
.append("svg")
.attr ({
width: wid,
height: hei
});
svg.selectAll("rect")
.data(dataset, key)
.enter()
.append("rect")
.attr ({
x: function(data, index) {
return xScale(index) }, // sets X values
y: function(data) { return (hei - yScale(data.value)); },
width: xScale.rangeBand(),
height: function(data) { return yScale(data.value); },
/* taller bars more blue, shorter ones more black - red/green 0'd out */
fill: function(data) { return "rgb(0,0, " + (data.value * 15) + ")"; }
})
.on("mouseover", function(data) {
d3.select(this)
.attr("fill", "orange"); })
.on("mouseout", function(data) {
d3.select(this)
.transition()
.duration(1050)
.attr("fill", "rgb(0, 0," + (data.value*10) + ")");
});
svg.selectAll("text")
.data(dataset, key)
.enter()
.append("text")
.text(function(data) {
return data.value;
})
.attr ({
'text-anchor': "middle",
x: function(data, index) {
return xScale(index) + xScale.rangeBand() / 2; },
y: function(data) { return hei - yScale(data.value) + 15; },
'font-family': "sans-serif",
'font-size': "11px",
fill: "white"
})
.style("pointer-events", "none");
/* ---------- EVENT LISTENER HERE ----------- */
d3.selectAll("button")
.on("click", function() {
/* Get ID of the clicked element */
var paragraphID = d3.select(this).attr("id");
if (paragraphID == "hello") {
var maxVal = 25;
var newNum = Math.floor(Math.random() * maxVal);
/* What lastKeyVal is doing is when you add in a new #. You are taking the length of the dataset, and grabbing
it's key. You are then pushing that key up on the chart and it's value correspondence as well. You're
essentially saving it into dataset*/
var lastKeyVal = dataset[dataset.length - 1].key;
console.log(lastKeyVal);
dataset.push({
key: lastKeyVal +1,
value: newNum
});
} else if (paragraphID == "goodbye") {
console.log(function(data) { return data.value; });
dataset.shift();
}
/* Recalibrate the length of the of the dataset. Take the range
first of how long it is using a d3 called, and then set that as
the domain. */
xScale.domain(d3.range(dataset.length));
yScale.domain([0, d3.max(dataset, function(data) { return data.value; }) ]);
var bars = svg.selectAll("rect")
.data(dataset, key);
/* Add/update this new bar to the selection to match
all the scaling */
bars.enter()
.append("rect")
.attr({
x: wid, // Sets thew new bar to the end of the wid
y: function(data) { return hei - yScale(data.value); }, // Set y val based on updated yScale
width: xScale.rangeBand(),
height: function(data) { return yScale(data.value); },
fill: function(data) { return "rgb(0, 0, " + (data.value * 10) + ")"; }
})
//.style("pointer-events", "none")
.on("mouseover", function(data) {
d3.select(this)
.attr("fill", "orange"); })
.on("mouseout", function(data) {
d3.select(this)
.transition()
.duration(1050)
.attr("fill", "rgb(0, 0," + (data.value*10) + ")"); });
/* Update the bar transitioning sequence
Setting new x position based on the updated xScale */
bars.transition()
.duration(500)
.attr({
x: function(data, index) { return xScale(index); },
y: function(data) { return hei - yScale(data.value); },
width: xScale.rangeBand(),
height: function(data) { return yScale(data.value); }
})
/*.on("mouseover", function(data) {
d3.select(this)
.attr("fill", "orange"); })
.on("mouseout", function(data) {
d3.select(this)
.transition()
.duration(1050)
.attr("fill", "rgb(0, 0," + (data.value*10) + ")"); }); */
bars.exit()
.transition()
.duration(500)
.attr({
x: wid
})
.remove();
var barText = svg.selectAll("text")
.data(dataset, key);
barText.enter()
.append("text")
.style("pointer-events", "none")
.text(function(data) {
return data.value;
})
.attr ({
'text-anchor': "middle",
x: function(data, index) {
return xScale(index) + xScale.rangeBand() / 2; },
y: function(data) { return hei - yScale(data.value) + 15; },
'font-family': "sans-serif",
'font-size': "11px",
fill: "white"
});
barText.transition()
.duration(500)
.attr({
x: function(data, index) { return xScale(index) + xScale.rangeBand() / 2; },
'text-anchor': "middle",
y: function(data) { return hei - yScale(data.value) + 15; },
'font-family': "sans-serif",
'font-size': "11px",
fill: "white"
})
.style("pointer-events", "none");
barText.exit()
.transition()
.duration(500)
.attr ({
x: (-xScale.rangeBand())
})
.remove()
});
</script>
</body>
</html>