-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
87 lines (83 loc) · 3.43 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
<!-- Header -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/base.css">
<link rel="stylesheet" href="assets/style.css">
<title>DECODE - Damage Evaluation with Comprehensive Observation Data on Earth</title>
</head>
<body>
<div class="row">
<!-- Column for user controls -->
<div class="four columns div-user-controls">
<a href="https://rkomi98.github.io/DECODE/">
<img class="logo" src="https://github.com/Rkomi98/DECODE/blob/main/static/DECODE_logo.png?raw=true" />
</a>
<h2>DECODE - Damage Evaluation with Comprehensive Observation Data on Earth</h2>
<p>Select different days using the date picker or by selecting different time frames on the histogram.</p>
<div class="div-for-dropdown">
<input type="date" id="date-picker" name="date-picker" min="2014-04-01" max="2014-09-30" value="2014-04-01">
</div>
<div class="row">
<div class="div-for-dropdown">
<select id="location-dropdown">
<option value="" disabled selected>Select a location</option>
{% for location in list_of_locations %}
<option value="{{ location }}">{{ location }}</option>
{% endfor %}
</select>
</div>
<div class="div-for-dropdown">
<select id="bar-selector" multiple>
{% for n in range(24) %}
<option value="{{ n }}">{{ n }}:00</option>
{% endfor %}
</select>
</div>
</div>
<p id="total-rides"></p>
<p id="total-rides-selection"></p>
<p id="date-value"></p>
<p>
Source: <a href="https://github.com/fivethirtyeight/uber-tlc-foil-response/tree/master/uber-trip-data" target="_blank">FiveThirtyEight</a>
</p>
<p>
Links:
<a href="https://github.com/plotly/dash-sample-apps/tree/main/apps/dash-uber-rides-demo" target="_blank">Source Code</a> |
<a href="https://plotly.com/get-demo/" target="_blank">Enterprise Demo</a>
</p>
</div>
<!-- Column for app graphs and plots -->
<div class="eight columns div-for-charts bg-grey">
<div id="map-graph"></div>
<div class="text-padding">
<p>Select any of the bars on the histogram to section data by time.</p>
</div>
<div id="histogram"></div>
</div>
</div>
<!-- Load Dash app script -->
<script>
// Load the Dash app into the placeholder div
$(document).ready(function(){
$.getScript("temp.py", function() {
// Dash app loaded
console.log("Dash app loaded!");
});
});
</script>
<!--
<script>
// Load Flask dynamic content into the placeholder div
$(document).ready(function(){
$.get("/dynamic_content", function(data) {
// Inject dynamic content into the placeholder div
$("#dynamic-content").html(data);
});
});
</script>
-->
</body>
</html>