forked from maxhli/fakebigdata
-
Notifications
You must be signed in to change notification settings - Fork 0
/
array-as-data.html
109 lines (90 loc) · 3.19 KB
/
array-as-data.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
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array as Data</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script type="text/javascript" src="d3.js"></script>
</head>
<body>
<div>
<script type="text/javascript">
function roundToTwo(num) {
return +(Math.round(num + "e+2") + "e-2");
}
var interval = 1500;
var num1 = roundToTwo(Math.random()*100)
var num2 = roundToTwo(Math.random()*100)
var num3 = roundToTwo(Math.random()*100)
var num4 = roundToTwo(Math.random()*100)
var num5 = roundToTwo(Math.random()*100)
var num6 = roundToTwo(Math.random()*100)
var num7 = roundToTwo(Math.random()*100)
var num8 = roundToTwo(Math.random()*100)
var num9 = roundToTwo(Math.random()*100)
var num10 = roundToTwo(Math.random()*100)
var data = [num1, num2, num3, num4, num5, num6, num7, num8, num9, num10]; // <- A
var colors = ["green", "lightseagreen", "teal", "Blue", "Steelblue", "midnightblue", "black", "maroon", "purple", "DarkOrchid"];
function render(data) { // <- B
// Enter
d3.select("body").selectAll("div.v-bar") // <- C
.data(data) // <- D
.enter() // <- E
.append("div") // <- F
.attr("class", "v-bar")
.append("span"); // <- G
// Update
d3.select("body").selectAll("div.v-bar")
.data(data)
.style("height", function (d) { // <- H
return (d * 3) + "px";
})
.style("background-color", function (d, i) { // <- H
return colors[i];
})
//.style("bottom", "200px")
.select("span") // <- I
.text(function (d) {
return d;
});
// Exit
d3.select("body").selectAll("div.v-bar")
.data(data)
.exit() // <- J
.remove();
}
setInterval(function () { // <- K
// data.shift();
// data.push(Math.round(Math.random() * 100));
num1 = roundToTwo(Math.random()*100)
num2 = roundToTwo(Math.random()*100)
num3 = roundToTwo(Math.random()*100)
num4 = roundToTwo(Math.random()*100)
num5 = roundToTwo(Math.random()*100)
num6 = roundToTwo(Math.random()*100)
num7 = roundToTwo(Math.random()*100)
num8 = roundToTwo(Math.random()*100)
num9 = roundToTwo(Math.random()*100)
num10 = roundToTwo(Math.random()*100)
data = [num1, num2, num3, num4, num5, num6, num7, num8, num9, num10];
render(data);
}, interval);
render(data);
</script>
</div>
<form id="frm1" action="form_action.asp" name="frm1">
Total animation time (seconds): <input type="text" name="time" size="7"> <br>
Time interval: <input type="text" name="interval" id="interval" size="7"> <br>
Starting number (inclusive): <input type="text" name="start" size="7"> <br>
Animation type (Fibonacci, Factorial, or Prime): <input type="text" name="type" size="10"> <br>
<input type="button" onclick="myFunction()" value="Update">
</form>
<script>
function myFunction() {
//document.getElementById("frm1").submit();
//interval =
console.log(document.getElementById("frm1").interval)
}
</script>
</body>
</html>