-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathjnnnnn.html
90 lines (79 loc) · 1.96 KB
/
jnnnnn.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
<!DOCTYPE html>
<meta charset="utf-8" />
<style>
text {
font: bold 48px monospace;
}
.enter {
fill: green;
}
.update {
fill: #333;
}
.exit {
fill: brown;
}
</style>
<svg width="1500" height="500"></svg>
<div>
following
<a href="https://bl.ocks.org/mbostock/3808234"
>mbostok's General Update Pattern III</a
>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var strings = [
"j1 n2 n3 n4 n5 n6",
"j1 o n2 a t h a n3 n4 e i l n5 e w n6 h a m",
"j1 n2 n3 n4 n5 n6",
"j1 o n a t h a n ' s m a n2 y n3 s n4 e e d n5 o j u s t i f i c a t i o n6"
].map(s =>
s
.split(" ")
.map((c, i) => ({ letter: c[0], key: c.slice(1) || "i" + c + i }))
);
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
g = svg.append("g").attr("transform", "translate(32," + height / 2 + ")");
function update(data) {
var t = d3.transition().duration(3000);
// JOIN new data with old elements.
var text = g.selectAll("text").data(data, d => d.key);
// EXIT old elements not present in new data.
text
.exit()
.attr("class", "exit")
.transition(t)
.attr("y", 60)
.style("fill-opacity", 1e-6)
.remove();
// UPDATE old elements present in new data.
text
.attr("class", "update")
.attr("y", 0)
.style("fill-opacity", 1)
.transition(t)
.attr("x", (d, i) => i * 32);
// ENTER new elements present in new data.
text
.enter()
.append("text")
.attr("class", "enter")
.attr("dy", ".35em")
.attr("y", -60)
.attr("x", (d, i) => i * 32)
.style("fill-opacity", 1e-6)
.text(d => d.letter)
.transition(t)
.attr("y", 0)
.style("fill-opacity", 1);
}
update(strings[1]);
let index = 0;
d3.interval(function() {
update(strings[index]);
index = (index + 1) % strings.length;
}, 3300);
</script>