-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathmeters.html
100 lines (87 loc) · 2.34 KB
/
meters.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3</title>
<script src="d3.js"></script>
</head>
<body>
<script>
var n = 10,
w = 960,
h = 500,
R = 100,
r = 10,
size = 50,
color = d3.scale.category20();
data = [];
var x = d3.scale.linear().range([0, w]).clamp(true);
var inv = d3.scale.pow().exponent(2).domain([0,size]).range([R-r/2,r]);
var arc = d3.svg.arc()
.innerRadius(inv)
.outerRadius(R)
.startAngle(0)
.endAngle(function(d, i) { return (i%2 || -1) * (d / size) * 2 * Math.PI; });
function interpolator(fn) {
return function(d, i) {
var inte = d3.interpolate(this.current || 0, d.value),
inte_ = function(t) { return (this.current = inte(t)); }.bind(this);
return function(t) {
return (typeof fn === "function" ? fn : this[fn]).call(this, inte_(t), i);
}.bind(this);
}
}
function bindRamp(d, i) {
this.ramp = d3.scale.linear().domain([0, size]).range([color(i), color(i+1)]);
}
var timeout;
function defer(fn, val) {
clearTimeout(timeout);
timeout = setTimeout(function() { fn(val); }, 0);
}
var vis = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
.append("g")
.attr("transform", "translate(" + R + "," + R + ")");
function draw(data) {
x.domain([0, data.length]);
var arcs = vis.selectAll("g").data(data);
var enter = arcs.enter().append("g")
enter.append("path").each(bindRamp);
enter.append("text").each(bindRamp)
.text(function(d) { return d.name; })
.attr("fill", function(d, i) { return color(i); });
arcs.transition()
.attr("transform", function(d, i) { return "translate(" + x(i) + ",0)"; })
.select("path")
arcs.select("path")
.transition()
.duration(1000)
.attrTween("d", interpolator(arc))
.attrTween("fill", interpolator("ramp"));
arcs.exit()
.transition()
.delay(1000)
.attr("transform", "scale(0)");
}
function update(pos, value) {
data[pos] = data[pos] || {};
data[pos].value = value || Math.floor(Math.random() * size);
data[pos].name = 'foo' + pos;
defer(draw, data);
}
var j = 0;
setInterval(function() {
if (j < n) {
update(j++);
} else {
update(Math.floor(Math.random() * data.length));
update(Math.floor(Math.random() * data.length));
update(Math.floor(Math.random() * data.length));
}
}, 1000);
</script>
</body>
</html>