-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmodel.html
146 lines (127 loc) · 5.08 KB
/
model.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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.mousewheel@3.1.9/jquery.mousewheel.min.js"></script>
<!-- script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script -->
<script src="https://cdn.jsdelivr.net/npm/flot@4.2.0/dist/es5/jquery.flot.min.js"></script>
<script src="sliders.js"></script>
<script src="model.js"></script>
<script src="plot.js"></script>
</head>
<body>
<script>
var sliders = [];
var generator = new Generator();
var chart;
var frame;
function reset() {
document.getElementById("sliders").innerHTML = "";
sliders = [];
sliders.push(new Slider("sliders", "r0", "R0", 2.4, 0, 10, 0.1));
sliders.push(new Slider("sliders", "duration", "Duration", 14, 0, 21));
sliders.push(new Slider("sliders", "fatality", "Fatality (%)", 1, 0, 100, 0.1));
sliders.push(new Slider("sliders", "hospitalizations", "Hospitalizations (critical %)", 5, 0, 100, 0.1));
sliders.push(new Slider("sliders", "capacity", "ICU beds (per million)", 250, 0, 1000000));
sliders.push(new Slider("sliders", "population", "Population (millions)", 330, 0, 500));
sliders.push(new Slider("sliders", "initial", "Initially infected", 1000, 0, 1000000));
sliders.push(new Slider("sliders", "id", "Initial dead", 0, 0, 1000000));
$("<button id='cfg'>Show</button>")
.on('click', () => show(true))
.appendTo('#sliders');
generator = new Generator();
$('#window').slider({
range: true,
min: 0,
max: 360,
values: [0, 180],
slide: function(event, ui) { show('nosave'); }
})
}
function setDefaults() {
new URLSearchParams(location.search).forEach(function(value, key) {
console.log(key + '=' + value);
if(key == 'active') $('#' + value).click();
else if(key == 'range') $('#window').slider('option', 'values', value.split("-"));
else if(key == 'max') $('#window').slider('option', 'max', value);
else sliders.find((s) => s.it.id == key).setValue(value);
});
saveDefaults(true);
}
function saveDefaults(replace) {
vals = config();
vals.active = $('#kinds .link.selected').attr('id');
vals.range=$('#window').slider('option', 'values').join('-');
vals.max=$('#window').slider('option', 'max');
url = new URL(location.href);
url.search = "?" + $.param(vals);
if (replace) { history.replaceState({ path: url.href }, '', url.href); }
else if (url.href != location.href) { history.pushState({ path: url.href }, '', url.href); }
}
$(function() {
reset();
$('#kinds .link').click(function(event) {
if(!$(event.target).is(".selected")) {
$('#kinds .link.selected').removeClass('selected');
$(event.target).addClass("selected");
show(true);
}
});
setDefaults();
show(true);
});
function show(gen, days) {
if(gen) generator = new Generator();
var fromTo =$('#window').slider('values');
if(frame && $('#locked').is(':checked')) {
var diff = frame[1] - frame[0];
if (frame[0] == fromTo[0]) {
fromTo[0] = fromTo[1] - diff
} else { fromTo[1] = fromTo[0] + diff; }
$('#window').slider('option', 'values', fromTo);
}
var kind = $('#kinds .link.selected');
var data = [];
generator.generate(config(), fromTo[1]).history.reduce (function(last, state, index) {
var next = state.data(config(), kind.attr('id'), last);
if (index >= fromTo[0]) data.push([index, next]);
return next;
}, 0)
chart = initChart("#canvas", [ { data: data, label: kind.html() } ]);
chart.draw();
$('#canvas').dblclick(function() {
$('#window').slider('option', 'max', 360);
$('#window').slider('option', 'values', [0,180]);
show(true);
});
if ($('#window').slider('option', 'max') == fromTo[1]) $('#window').slider('option', 'max', fromTo[1]*2);
frame = $('#window').slider('values');
if(gen != 'nosave') saveDefaults();
}
function config() {
return sliders.reduce(
function(o, s) { o[s.it.id] = Number(s.it.value); return o; },
{}
);
}
</script>
<div class="chart-holder">
<div id="kinds">
<div id="infected" class="link selected">Infected</div>
<div id="daily" class="link">Daily Infections</div>
<div id="deaths" class="link"> Daily Deaths</div>
<div id="dead" class="link">Total dead</div>
<div id="sick" class="link">Total Infections</div>
<div style="clear:both"></div>
</div>
<div id="canvas"></div>
<div id="window_control" style="float:left">
<label for="locked">Lock Range </label>
<input type="checkbox" id="locked" />
<div id="window"></div>
</div>
<div id="sliders" style="float:left"></div>
</div>
</body>