-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
56 lines (48 loc) · 1.4 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
<!DOCTYPE html>
<html>
<head>
<title>Koto Chart</title>
<script src="/node_modules/d3/d3.js"></script>
<script src="/node_modules/koto/dist/koto.js"></script>
</head>
<body>
<svg width="800" height="500">
<g id="chart"></g>
</svg>
<script src="/dist/chart.js"></script>
<script>
// datasrc.js
// A simple data source to feed the bar chart visualization. Based on the
// implementation in "A Bar Chart, part 2":
// http://mbostock.github.com/d3/tutorial/bar-2.html
(function(window) {
"use strict";
var DataSrc = window.DataSrc = function() {
var self = this;
this.time = 1297110663; // start time (seconds since epoch)
this.value = 70;
this.data = d3.range(33).map(function() { return self.next(); });
};
DataSrc.prototype.next = function() {
this.time += 1;
this.value = ~~Math.max(10, Math.min(90, this.value + 10 * (Math.random() - .5)));
return {
time: this.time,
value: this.value
};
};
DataSrc.prototype.fetch = function() {
this.data.shift();
this.data.push(this.next());
};
}(this));
var dataSrc = new DataSrc();
var barChart = new KotoBarChart(d3.select('#chart'));
barChart.draw(dataSrc.data);
setInterval(function() {
dataSrc.fetch();
barChart.draw(dataSrc.data);
}, 1500);
</script>
</body>
</html>