-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
122 lines (109 loc) · 7.85 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
<title>ICS 31 Fall 2015 Statistics</title>
<meta charset="utf-8">
<meta name="author" content="Waitaya Krongapiradee">
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">
<script type="text/javascript" src="https://cdn.plot.ly/plotly-1.5.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
</head>
<body>
<div style="max-width: 1024px; margin: auto">
<div id="boxPlot"></div>
<div id="gradeDistribution"></div>
<div id="midterm1"></div>
<div id="midterm2"></div>
</div>
<script type="text/javascript">
'use strict'
var finalGrades = ['A+', 'A', 'A-', 'B+', 'B', 'B-', 'C+', 'C', 'C-', 'D', 'D-', 'F', 'P', 'NP', 'NR']
var finalData = [[70.0, 69.0, 69.5, 70.0, 70.0, 70.0, 70.0, 70.0, 70.0, 70.0, 70.0, 70.0, 70.0, 70.0], [68.0, 67.0, 60.0, 65.0, 67.5, 62.5, 70.0, 64.0, 65.5, 65.5, 65.0, 67.0, 63.5, 67.0, 68.0, 69.0, 65.0, 68.0, 65.0, 68.5, 69.0, 67.0, 68.0, 65.5, 67.0, 64.0, 70.0, 64.5, 69.0, 66.0, 67.0, 70.0, 69.5, 68.0, 67.0, 63.5, 66.0, 65.0, 65.5, 69.0, 65.5, 66.0, 69.0, 67.0, 68.0, 64.0, 63.5, 64.5, 65.5, 65.0, 69.0, 65.0, 63.5, 70.0, 65.5, 62.5, 67.5, 69.0, 61.0, 69.0, 69.0, 69.0, 68.0, 70.0, 68.0, 65.5, 66.0, 65.5, 69.0, 68.5, 65.0, 63.5, 63.5, 65.5, 66.5, 67.0, 70.0, 68.0, 69.0, 61.5, 67.0, 70.0, 64.5, 69.5, 66.5, 70.0, 65.0, 69.0, 69.0, 69.0, 66.5, 64.5, 69.0, 62.5, 58.5, 66.0, 67.5, 66.0, 67.0, 65.5, 66.5, 68.5, 70.0, 66.5, 69.0, 70.0, 69.0, 63.5, 67.5, 68.0, 64.5, 61.0, 69.0, 66.5, 63.0, 68.0, 68.0, 61.0, 62.0, 67.5, 68.0, 61.0, 67.5, 69.0, 65.0, 68.5, 62.0, 64.5, 65.5, 62.0, 66.5, 63.5, 61.5, 70.0, 66.5, 67.5, 62.0, 68.0, 67.0, 68.5, 68.0, 66.0, 69.0, 69.0, 69.0, 68.5, 64.0, 64.0, 67.0, 69.0, 67.5, 67.0, 66.0, 66.0, 59.5, 69.5, 61.5, 67.0, 67.0, 69.0, 63.0, 70.0, 67.0, 63.5, 69.0, 63.5, 65.0, 68.0, 62.0, 66.0, 65.0, 67.0, 67.0, 64.0, 64.5, 69.0, 65.0, 70.0, 69.5, 63.0, 67.0, 68.0, 66.0, 64.5, 68.0, 67.5, 68.0, 70.0, 65.0, 67.0, 67.5, 66.0, 68.0, 70.0, 68.0, 68.5, 67.5, 70.0, 64.5, 69.5, 69.0, 70.0, 66.5, 67.0, 63.0, 69.0, 68.0, 66.5, 67.0, 70.0, 68.5, 65.0, 65.5, 68.5, 70.0, 70.0, 65.5, 67.0, 68.0, 67.0, 66.0, 68.0, 66.5, 68.0, 67.0, 67.5, 65.5, 70.0, 62.0, 70.0, 69.5, 66.0, 63.5, 60.5, 66.0, 68.0, 69.5, 62.0, 68.0, 70.0, 67.0, 63.0, 67.5, 69.0, 63.5, 66.0, 66.0, 65.5, 63.5, 66.0, 68.0, 65.0, 66.5], [58.0, 68.0, 64.0, 62.0, 63.5, 62.0, 66.5, 61.5, 62.5, 61.5, 63.5, 64.0, 64.0, 67.0, 60.5, 59.5, 58.0, 63.5, 64.0, 67.0, 61.0, 63.5, 64.5, 62.5, 63.0, 61.0, 65.5, 66.0, 63.0, 62.0, 62.5, 57.0, 61.0, 63.0, 63.0, 58.5, 64.0, 60.0, 61.5, 59.0, 62.0, 55.0, 66.0, 63.0, 63.0, 61.0, 60.0, 61.5, 57.5, 63.5, 65.0, 60.0, 66.5, 60.5, 64.0, 61.5, 60.5, 61.0, 60.5, 62.0, 67.0, 62.5, 62.5, 65.5, 59.0, 59.5, 65.0, 60.0, 62.5, 64.0, 61.0, 63.0, 62.0, 63.5], [57.5, 57.5, 60.0, 57.0, 61.0, 65.0, 58.0, 61.5, 60.5, 55.0, 58.0, 55.0, 60.0, 62.5, 59.0, 66.5, 63.0, 61.5, 60.0, 60.5, 63.5, 62.5, 58.0, 59.5, 53.0, 56.5, 66.5, 63.5, 61.5, 63.5, 58.5, 63.5, 57.0, 59.0, 63.5, 53.5, 58.0, 55.0, 63.0, 58.5, 54.5, 61.5, 49.0, 60.0, 62.5, 55.5, 60.5, 59.0, 59.0, 55.0, 60.0, 59.0, 57.5, 59.5, 58.5, 63.0, 56.0, 57.5, 58.0, 57.0, 60.0, 62.5, 57.5, 57.0, 61.0, 61.0, 59.0, 52.0, 57.5, 56.5, 65.0], [59.5, 56.0, 60.5, 46.0, 60.5, 58.5, 61.0, 59.0, 59.0, 52.5, 53.5, 56.0, 54.0, 51.5, 62.0, 57.0, 58.5, 56.0, 59.0, 54.5, 57.5, 54.5, 57.5, 55.0, 52.0, 57.0, 59.0, 53.5, 53.0, 55.0, 52.0, 54.5, 63.5, 60.0, 56.5, 60.5, 54.0, 56.0, 53.5, 56.0, 53.5, 55.5, 55.5, 55.5, 56.0, 51.0, 61.5, 54.5, 61.0, 52.5, 52.0, 56.0, 54.0, 55.5, 52.0, 61.0, 56.0, 59.5, 51.5, 60.5, 55.0, 60.0, 56.0, 55.0, 57.5, 55.5, 61.5, 58.0, 59.0, 54.5, 52.5, 49.0, 60.0, 56.0, 58.0, 56.5, 68.0, 59.0, 55.0, 57.5, 56.5, 59.0, 56.5, 63.5], [54.5, 52.5, 49.0, 51.0, 51.5, 53.0, 43.5, 52.0, 49.5, 58.0, 61.0, 55.0, 65.0, 53.5, 54.0, 53.0, 57.0, 45.5, 54.5, 58.0, 51.0, 56.0, 49.5, 51.5, 67.5, 53.0, 56.5, 48.5, 57.0, 66.5, 47.5], [48.5, 50.0, 54.0, 41.0, 52.0, 42.5, 63.5, 54.5, 49.0, 48.5, 53.5, 52.5, 48.5, 50.0, 48.0, 46.0, 52.5, 53.5, 48.0, 49.5, 47.5, 52.0, 58.0, 48.5, 47.0, 63.0, 54.0, 43.0], [66.0, 46.0, 45.0, 51.0, 48.0, 41.5, 43.0, 44.0, 46.0, 57.0, 40.0, 38.5, 54.5, 44.0, 43.0, 42.5, 33.5, 44.5, 38.5, 55.0, 58.5, 38.5, 42.0, 53.0, 50.0, 46.5, 48.0, 44.0, 51.5, 48.5, 45.0, 42.0, 44.0, 46.5, 42.0, 48.5, 62.5, 40.0, 45.5, 51.0, 50.0, 43.5, 47.0, 58.5], [32.5, 49.5, 33.0, 49.0, 50.0, 38.5, 29.5, 30.0, 41.5, 31.0, 42.0, 44.0, 36.0, 29.5, 34.0, 30.5, 40.5, 58.5, 32.5, 32.0, 36.0, 37.5, 36.0, 42.0, 45.0, 30.5], [37.5, 24.5, 24.0, 43.5, 41.5, 48.5, 24.0, 30.5, 36.5], [37.5], [21.0], [47.5], [68.0, 26.0], [41.5, 45.0, 54.0, 56.5, 50.5, 68.5, 59.0, 64.5, 56.0, 60.0, 64.5, 54.5, 49.5, 55.5, 64.0, 48.0, 65.5, 43.0, 55.0, 43.5, 60.0, 65.5, 56.0, 29.0, 65.0, 55.5, 48.0, 68.0, 43.5, 49.0, 64.0, 69.0, 45.0, 59.5, 41.0, 38.0, 61.0, 55.5, 67.0, 48.5, 54.5, 51.5, 66.5, 49.5, 55.0, 61.5, 52.5, 49.5, 61.5, 28.0, 45.0]]
var midterm1Score = [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]
var midterm1Count = [2, 2, 0, 2, 1, 0, 1, 0, 0, 2, 1, 5, 4, 5, 9, 4, 2, 4, 8, 11, 16, 9, 12, 15, 20, 25, 33, 33, 47, 60, 64, 90, 109, 74, 20]
var midterm2Score = [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]
var midterm2Count = [6, 2, 4, 12, 5, 4, 2, 9, 8, 10, 9, 11, 12, 34, 25, 29, 37, 40, 45, 42, 41, 34, 38, 43, 48, 31, 31, 20, 21, 15, 9]
var data1 = []
var data2 = []
var data3 = []
var data4 = []
function generate_rainbow (n) {
var allColors = numeric.linspace(0, 360, n)
var result = []
for (var i = 0; i < n; i++) {
result.push('hsl(' + allColors[i] + ',50%' + ',50%)')
}
return result
}
var rainbow = generate_rainbow(finalGrades.length)
for (var i = 0; i < finalGrades.length; i++) {
var result = {
type: 'box',
boxpoints: 'all',
name: finalGrades[i],
y: finalData[i],
marker: {
color: rainbow[i]
}
}
data1.push(result)
}
var data2 = [
{
x: finalGrades,
y: finalData.map(y => {
return y.length
}),
type: 'bar',
marker: {
color: rainbow
}
}
]
rainbow = generate_rainbow(midterm1Score.length)
var data3 = [
{
x: midterm1Score,
y: midterm1Count,
type: 'bar',
marker: {
color: rainbow
}
}
]
rainbow = generate_rainbow(midterm2Score.length)
var data4 = [
{
x: midterm2Score,
y: midterm2Count,
type: 'bar',
marker: {
color: rainbow
}
}
]
var layout1 = {
title: 'Grade vs Final Score'
}
var layout2 = {
title: 'Grade Distribution'
}
var layout3 = {
title: 'First Midterm Score Distribution'
}
var layout4 = {
title: 'Second Midterm Score Distribution'
}
Plotly.newPlot('boxPlot', data1, layout1)
Plotly.newPlot('gradeDistribution', data2, layout2)
Plotly.newPlot('midterm1', data3, layout3)
Plotly.newPlot('midterm2', data4, layout4)
window.onresize = function() {
Plotly.Plots.resize(document.getElementById('boxPlot'))
Plotly.Plots.resize(document.getElementById('gradeDistribution'))
Plotly.Plots.resize(document.getElementById('midterm1'))
Plotly.Plots.resize(document.getElementById('midterm2'))
}
</script>
</body>
</html>