-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
99 lines (77 loc) · 2.67 KB
/
index.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
<!DOCTYPE html>
<html>
<body>
<div class="graph"></div>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script>
var limit = 60 * 1,
duration = 1000,
now = new Date(Date.now() - duration)
var width = 500,
height = 200
var current = {
value: 0,
data: d3.range(limit).map(function () {
return 0
})
}
var x = d3.scaleTime()
.domain([now - (limit - 2), now - duration])
.range([0, width])
var y = d3.scaleLinear()
.domain([-100, 100])
.range([height, 0])
var line = d3.line()
.x(function (d, i) {
return x(now - (limit - 1 - i) * duration)
})
.y(function (d) {
return y(d)
})
.curve(d3.curveBasis)
var svg = d3.select('.graph').append('svg')
.attr('class', 'chart')
.attr('width', width)
.attr('height', height + 50)
var x_axis = svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + y(0) + ')')
.call(x.axis = d3.axisBottom().scale(x))
var y_axis = svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(20,0)')
.call(d3.axisLeft().scale(y).ticks(20))
var current_path = svg.append('g')
.append('path')
.data([current.data])
.style('fill', 'transparent')
.style('stroke', 'red')
function tick() {
now = new Date()
//group.data.push(group.value) // Real values arrive at irregular intervals
current.data.push(getRandomArbitrary(-100, 100))
current_path.attr('d', line)
// Shift domain
x.domain([now - (limit - 2) * duration, now - duration])
// Slide x-axis left
x_axis.transition()
.duration(duration)
.ease(d3.easeLinear, 2)
.call(x.axis)
// Slide path left
current_path.attr('transform', null)
.transition()
.duration(duration)
.ease(d3.easeLinear, 2)
.attr('transform', 'translate(' + x(now - (limit - 1) * duration) + ')')
.on('end', tick)
// Remove oldest data point from each group
current.data.shift()
}
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
tick()
</script>
</body>
</html>