-
Notifications
You must be signed in to change notification settings - Fork 0
/
gsa-tts.html
214 lines (205 loc) · 9.64 KB
/
gsa-tts.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
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>GSA :: Technology Transformation Service</title>
<style>
body { background-color: #1c5295; }
svg { position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; }
rect { fill: #fff; opacity: 0; }
</style>
</head>
<body>
<svg width='178' height='118'>
<title>TTS</title>
<rect x='0' y='20' width='8' height='8'></rect>
<rect x='0' y='30' width='8' height='8'></rect>
<rect x='0' y='40' width='8' height='8'></rect>
<rect x='0' y='50' width='8' height='8'></rect>
<rect x='0' y='60' width='8' height='8'></rect>
<rect x='10' y='0' width='8' height='8'></rect>
<rect x='10' y='10' width='8' height='8'></rect>
<rect x='10' y='20' width='8' height='8'></rect>
<rect x='10' y='30' width='8' height='8'></rect>
<rect x='10' y='40' width='8' height='8'></rect>
<rect x='10' y='50' width='8' height='8'></rect>
<rect x='10' y='60' width='8' height='8'></rect>
<rect x='10' y='70' width='8' height='8'></rect>
<rect x='20' y='0' width='8' height='8'></rect>
<rect x='20' y='10' width='8' height='8'></rect>
<rect x='20' y='20' width='8' height='8'></rect>
<rect x='20' y='30' width='8' height='8'></rect>
<rect x='20' y='40' width='8' height='8'></rect>
<rect x='20' y='50' width='8' height='8'></rect>
<rect x='20' y='60' width='8' height='8'></rect>
<rect x='20' y='70' width='8' height='8'></rect>
<rect x='30' y='0' width='8' height='8'></rect>
<rect x='30' y='10' width='8' height='8'></rect>
<rect x='30' y='20' width='8' height='8'></rect>
<rect x='30' y='30' width='8' height='8'></rect>
<rect x='30' y='40' width='8' height='8'></rect>
<rect x='30' y='50' width='8' height='8'></rect>
<rect x='30' y='60' width='8' height='8'></rect>
<rect x='30' y='70' width='8' height='8'></rect>
<rect x='30' y='80' width='8' height='8'></rect>
<rect x='40' y='10' width='8' height='8'></rect>
<rect x='40' y='20' width='8' height='8'></rect>
<rect x='40' y='30' width='8' height='8'></rect>
<rect x='40' y='40' width='8' height='8'></rect>
<rect x='40' y='50' width='8' height='8'></rect>
<rect x='40' y='60' width='8' height='8'></rect>
<rect x='40' y='70' width='8' height='8'></rect>
<rect x='40' y='80' width='8' height='8'></rect>
<rect x='50' y='10' width='8' height='8'></rect>
<rect x='50' y='20' width='8' height='8'></rect>
<rect x='50' y='30' width='8' height='8'></rect>
<rect x='50' y='40' width='8' height='8'></rect>
<rect x='50' y='50' width='8' height='8'></rect>
<rect x='50' y='60' width='8' height='8'></rect>
<rect x='50' y='70' width='8' height='8'></rect>
<rect x='50' y='80' width='8' height='8'></rect>
<rect x='60' y='10' width='8' height='8'></rect>
<rect x='60' y='20' width='8' height='8'></rect>
<rect x='60' y='30' width='8' height='8'></rect>
<rect x='60' y='40' width='8' height='8'></rect>
<rect x='60' y='50' width='8' height='8'></rect>
<rect x='60' y='60' width='8' height='8'></rect>
<rect x='60' y='70' width='8' height='8'></rect>
<rect x='60' y='80' width='8' height='8'></rect>
<rect x='60' y='90' width='8' height='8'></rect>
<rect x='70' y='10' width='8' height='8'></rect>
<rect x='70' y='20' width='8' height='8'></rect>
<rect x='70' y='30' width='8' height='8'></rect>
<rect x='70' y='40' width='8' height='8'></rect>
<rect x='70' y='50' width='8' height='8'></rect>
<rect x='70' y='60' width='8' height='8'></rect>
<rect x='70' y='70' width='8' height='8'></rect>
<rect x='70' y='80' width='8' height='8'></rect>
<rect x='70' y='90' width='8' height='8'></rect>
<rect x='80' y='10' width='8' height='8'></rect>
<rect x='80' y='20' width='8' height='8'></rect>
<rect x='80' y='30' width='8' height='8'></rect>
<rect x='80' y='40' width='8' height='8'></rect>
<rect x='80' y='50' width='8' height='8'></rect>
<rect x='80' y='60' width='8' height='8'></rect>
<rect x='80' y='70' width='8' height='8'></rect>
<rect x='80' y='80' width='8' height='8'></rect>
<rect x='80' y='90' width='8' height='8'></rect>
<rect x='80' y='100' width='8' height='8'></rect>
<rect x='80' y='110' width='8' height='8'></rect>
<rect x='90' y='10' width='8' height='8'></rect>
<rect x='90' y='20' width='8' height='8'></rect>
<rect x='90' y='30' width='8' height='8'></rect>
<rect x='90' y='40' width='8' height='8'></rect>
<rect x='90' y='50' width='8' height='8'></rect>
<rect x='90' y='60' width='8' height='8'></rect>
<rect x='90' y='70' width='8' height='8'></rect>
<rect x='90' y='80' width='8' height='8'></rect>
<rect x='90' y='90' width='8' height='8'></rect>
<rect x='90' y='100' width='8' height='8'></rect>
<rect x='100' y='10' width='8' height='8'></rect>
<rect x='100' y='20' width='8' height='8'></rect>
<rect x='100' y='30' width='8' height='8'></rect>
<rect x='100' y='40' width='8' height='8'></rect>
<rect x='100' y='50' width='8' height='8'></rect>
<rect x='100' y='60' width='8' height='8'></rect>
<rect x='100' y='70' width='8' height='8'></rect>
<rect x='100' y='80' width='8' height='8'></rect>
<rect x='100' y='90' width='8' height='8'></rect>
<rect x='110' y='20' width='8' height='8'></rect>
<rect x='110' y='30' width='8' height='8'></rect>
<rect x='110' y='40' width='8' height='8'></rect>
<rect x='110' y='50' width='8' height='8'></rect>
<rect x='110' y='60' width='8' height='8'></rect>
<rect x='110' y='70' width='8' height='8'></rect>
<rect x='110' y='80' width='8' height='8'></rect>
<rect x='110' y='90' width='8' height='8'></rect>
<rect x='120' y='20' width='8' height='8'></rect>
<rect x='120' y='40' width='8' height='8'></rect>
<rect x='120' y='50' width='8' height='8'></rect>
<rect x='120' y='60' width='8' height='8'></rect>
<rect x='120' y='70' width='8' height='8'></rect>
<rect x='120' y='80' width='8' height='8'></rect>
<rect x='130' y='30' width='8' height='8'></rect>
<rect x='130' y='40' width='8' height='8'></rect>
<rect x='130' y='50' width='8' height='8'></rect>
<rect x='130' y='60' width='8' height='8'></rect>
<rect x='130' y='70' width='8' height='8'></rect>
<rect x='130' y='80' width='8' height='8'></rect>
<rect x='140' y='40' width='8' height='8'></rect>
<rect x='140' y='50' width='8' height='8'></rect>
<rect x='140' y='60' width='8' height='8'></rect>
<rect x='140' y='70' width='8' height='8'></rect>
<rect x='140' y='80' width='8' height='8'></rect>
<rect x='140' y='90' width='8' height='8'></rect>
<rect x='150' y='30' width='8' height='8'></rect>
<rect x='150' y='40' width='8' height='8'></rect>
<rect x='150' y='50' width='8' height='8'></rect>
<rect x='150' y='60' width='8' height='8'></rect>
<rect x='150' y='70' width='8' height='8'></rect>
<rect x='150' y='90' width='8' height='8'></rect>
<rect x='150' y='100' width='8' height='8'></rect>
<rect x='160' y='20' width='8' height='8'></rect>
<rect x='160' y='30' width='8' height='8'></rect>
<rect x='160' y='40' width='8' height='8'></rect>
<rect x='160' y='50' width='8' height='8'></rect>
<rect x='160' y='60' width='8' height='8'></rect>
<rect x='170' y='10' width='8' height='8'></rect>
<rect x='170' y='20' width='8' height='8'></rect>
</svg>
<script src='d3.min.js'></script>
<script>
function rand(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
function contains(arr, el) { return arr.indexOf(el) > -1 }
function sample(arr) { return arr[rand(0, arr.length - 1)]; }
function complete(transition, callback) {
var n = 0;
transition
.each(function() { ++n; })
.each('end', function() { if (!--n) callback.apply(this, arguments); });
}
var svg = d3.select('svg');
var width = +svg.attr('width');
var height = +svg.attr('height');
var rects = svg.selectAll('rect');
var rects_arr = rects[0];
var data = [];
var active = [];
rects.each(function(_) {
var r = d3.select(this);
data.push({ x: +r.attr('x'), y: +r.attr('y') })
});
rects.data(data)
.attr('x', function(d) { return rand(0, width); })
.attr('y', function(d) { return rand(0, height); })
.transition()
.ease('cubic-out')
.duration(function(d, i) { return i * 2 + 200; })
.delay(function(d, i) { return i * 15; })
.attr('x', function(d) { return d.x; })
.attr('y', function(d) { return d.y; })
.style('opacity', 1)
.call(complete, function() {
rects.on('mouseover', function() { flip(this); });
setInterval(function() { flip(sample(rects_arr)); }, 2000);
});
function flip(a) {
if (contains(active, a)) return;
active.push(a);
var remain = rects_arr.filter(function(r) { return !contains(active, r) });
var b = sample(remain);
active.push(b);
d3.selectAll([a, b])
.data([b.__data__, a.__data__])
.transition()
.ease('cubic-out')
.duration(1000)
.attr('x', function(d) { return d.x; })
.attr('y', function(d) { return d.y; })
.call(complete, function() {
active = active.filter(function(r) { return r !== a && r !== b });
});
}
</script>
</body>
</html>