-
Notifications
You must be signed in to change notification settings - Fork 6
/
04.html
95 lines (77 loc) · 2 KB
/
04.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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Selections with Data & SVG & Transitions</title>
</head>
<style>
#chart rect {
fill: lightblue;
stroke: lightseagreen;
stroke-width: 1;
}
</style>
<body>
<svg id="chart" style="position: absolute; top: 10%; left: 40%;">
</svg>
<script src="vendor/d3.js"></script>
<script src="scripts/simpleStream.js"></script>
<script>
// Create the stream
var refreshDataMS = 450;
var barWidth = 30;
var maxValue = 50;
var bars = 19;
var stream = new SimpleStream(bars, 50);
var height = barHeight(maxValue);
var chart = d3.select('#chart')
.attr({ width: (barWidth + 10) * bars, height: height });
// Read the stream
var initialData = stream.update();
// Set up the initial model:
var g = chart.selectAll()
.data(initialData)
.enter()
.append('g')
.attr( { transform: positionBar });
var rects = g.append('rect')
.attr({ width: barWidth, height: height });
var text = g.append('text')
.attr({ x: barWidth / 4, y: 15 })
.text(labelText);
setInterval(readStream, refreshDataMS);
readStream();
// Update the bars to match the stream data
function readStream() {
var data = stream.update();
g.data(data)
.transition(1)
.attr({ transform: positionBar });
// Fun with transitions! Note the use of text.datum and
// the various function constructors.
text
.data(data)
.transition()
.duration(refreshDataMS/2)
.tween('text', function generateInterpolator(d) {
var i = d3.interpolateRound(text.datum(), d);
return function (t) {
this.textContent = i(t);
};
});
}
// Supporting functions
function positionBar(d, i) {
var x = i * (barWidth + 3);
var y = height - barHeight(d);
return 'translate('+ x + ',' + y + ')';
}
function barHeight(d) {
return d * 10 + 20;
}
function labelText(d) {
return d;
}
</script>
</body>
</html>