-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy path8ball.html
117 lines (101 loc) · 3 KB
/
8ball.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
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.result {
text-align: center;
text-anchor: middle;
font-size: 50px;
}
</style>
<body>
<h1>QAARG</h1>
<svg style="position:absolute; top:0; left:0"></svg>
<script src="d3.v3.min.js" charset="utf-8"></script>
<script>
function typecolor(type) {
return d3.rgb(
{
"yes": "#00AA00",
"maybe":"#FC9010",
"no": "#AA0000"
}[type]);
}
var width = document.body.clientWidth;
var height = window.innerHeight;
var svg = d3.select("svg")
.attr("width", width)
.attr("height", height);
var ds = []; // data
d3.tsv("8ball-answers.tsv", function(error, tsv_rows) {
ds = tsv_rows.map(function(row) {
return {
Type: row.Type,
Text: row.Text,
x: (0.1 + 0.8 * Math.random()) * width,
y: (0.1 + 0.8 * Math.random()) * height
};
});
var node = svg.selectAll("g")
.data(ds)
.enter().append("g")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 10)
//.style("stroke", function(d, i) { return typecolor(d.Type).darker(4); })
.style("fill", "#AAA");
var sentinel = true;
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.attr("class", "posnode")
.text(function(d) { return d.Text; })
.style("fill", function(d) { return typecolor(d.Type).darker(3); })
.transition()
.delay(1000)
.duration(1000)
.style("opacity", 0)
.remove()
.each("start", function(d) { if (sentinel) { sentinel = false; onend1(); }});
});
function onend1() {
// http://stackoverflow.com/a/20097994/412529
var urlvars = {};
window.location.href.replace(/[?&]+([^=]+)=([^&]*)/gi,
(m,key,value) => urlvars[decodeURIComponent(key)] = decodeURIComponent(value));
if ("type" in urlvars)
vals = ds.filter(d=>urlvars["type"].split(",").includes(d.Type));
else
vals = ds;
var selected = vals[Math.floor(Math.random() * vals.length)];
var nodes = svg.selectAll("g")
.data([selected], function(d) { return d.Text; });
nodes.transition()
.delay(500).duration(1000)
.attr("transform", function(d) { return "translate(" + width/2 + "," + height/2 + ")"; })
.each("end", function(d) { onend2(); });
nodes.exit().transition()
.duration(1000)
.style("opacity", 0)
.remove();
}
function onend2() {
svg.selectAll("circle")
.transition()
.delay(500).duration(500)
.attr("r", 100)
.style("fill", function(d) { return typecolor(d.Type) })
.each("end", function() { onend3(); });
};
function onend3() {
svg.selectAll("g")
.append("text")
.attr("dx", 0)
.attr("dy", 150)
.attr("class", "result")
.text(function(d) { return d.Text; })
.style("fill", function(d) { return typecolor(d.Type).darker(); });
}
</script>
</body>