covid-plotter/index.html at master · chrwang/covid-plotter · GitHub

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
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="tooltip.css"/>
<link rel="stylesheet" type="text/css" href="style_no_export.css"/>
</head>
<body>
<div id="outer">
<div id="header">
	<header>
		<h1>COVID-19 Data Plotter</h1>
	</header>

	<p>
		A D3.js based plotter for your CS156 COVID challenge submissions! Takes in data in the same format as the EvalAI submission format. Scroll to zoom, click to drag,
		and hover over a county to get detailed information. This should work with any modern browser except for Safari (since WebKit never implemented native date inputs).
		Any images you make with the plotter can be freely used, no conditions!
	</p>
	<p>
		If you encounter bugs, want to contribute, or simply would like to point out that I suck at frontend, the repository can be found on <a href="https://github.com/chrwang/covid-plotter/">Github</a>.
	</p>

</div>
<div id="mapForm">
	<form id="totalCap">
		<label>Quantile
		<select id="selectQuantile" class="select">
			<option value="10">10%</option>
			<option value="20">20%</option>
			<option value="30">30%</option>
			<option value="40">40%</option>
			<option value="50">50%</option>
			<option value="60">60%</option>
			<option value="70">70%</option>
			<option value="80">80%</option>
			<option value="90">90%</option>
		</select>
	</label>
	<!--label>Date to Plot
		<input type="date" id="selectDate" value="2020-04-14" min="2019-12-31" max="2020-06-02" required> </input>
	</label-->
	<label>Data File
		<input type="file" id="uploader"/>
	</label>
	</form>
</div>

<div id="mapContainer">
	<div id="waitingText"> <h3>Waiting for file upload...</h3></div>
	<svg id="map"> </text></svg>
	<div id="downloadBtnDiv" style="visibility: hidden"> <button id="downloadBtn"> Save </button> </div>
</div>

<div id="slider_date">
	<button id="play-button">Play</button>
</div>

<div class="tooltip"></div>

<div id="pagefoot">
	Built with &hearts; by <a href="https://github.com/chrwang">Chris Wang</a> and [ASCIT_DONUT] test3
</div>

<script src="https://d3js.org/d3.v3.min.js" defer></script>
<script src="https://d3js.org/queue.v1.min.js" defer></script>
<script src="https://d3js.org/topojson.v1.min.js" defer></script>
<script src="https://d3js.org/d3-time.v1.min.js" defer></script>
<script src="https://d3js.org/d3-time-format.v2.min.js" defer></script>
<script src="https://d3js.org/d3-scale.v3.min.js" defer></script>
<script src="FileSaver.js" defer></script>
<script src="main.js" defer></script>