-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·161 lines (156 loc) · 7.32 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>AccessVisDC: Interactive Visual Exploration of Physical Accessibility</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<!-- JS files -->
<script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="javascript/color.js" type="text/javascript"></script>
<script src="javascript/utility-functions.js" type="text/javascript"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js'></script>
<!-- CSS files -->
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet'/>
<link href='stylesheet/main.css' rel='stylesheet'/>
</head>
<body>
<div id="overlay"></div>
<svg id="streets-container"></svg>
<!-- div map should come before the code that renders the map -->
<div id='map'></div>
<br/>
<div id='overview-level'>
<button id='reset-view' class="btn" onclick="resetView()">Reset View</button>
<div id='overview-pane' class="box">
<h1>AccessVisDC</h1>
<h3>Interactive Visual Exploration of Physical Accessibility</h3>
<div class="modal-body">
<div class="right">
<img src="assets/complete_map.png"/>
</div>
<div class="left">
<p>
<span style="padding-right: 10px;">Explore the physical accessibility of Washington DC with an interactive map
visualization that allows you to color the city with accessibility scores </span>
</p>
<p class="more-info">
<b>Data</b>
<br/>
<span>Using <a href="http://projectsidewalk.io/api">Project Sidewalk's API</a>, we visualize their
<a href="http://projectsidewalk.io">accessibility dataset</a> containing >250,000 labels for 1075
miles of DC.</span>
<br/>
<b>Approach</b>
<br/>
<span>We use the <b>Overview first Details-on-demand</b> approach to drill down into the accessibility of
a region. The visualization makes use of <b><em>semantic zooming</em></b> to show different forms of content
depending on the zoom level. We have three levels: city, neighborhood, and street level.
Through various interaction primitives, each level allows a user to explore the physical
accessibility from different aspects.</span>
</p>
</div>
<br style="clear:both;"/>
</div>
<div class="footer">
<button id='btn-close' class="btn" onclick="closeModal()">Start Exploring!</button>
</div>
</div>
<div id="overview-info-box" class="overview-info-box box">
<h1>Welcome to AccessVisDC!</h1>
<h3>Interactive Visual Exploration of Physical Accessibility</h3>
<div class="modal-body">
<p class="instruction">Start exploring the accessibility of Washington DC by dragging the
<img src="assets/brush_cursor.png" width="5%" style="display: inline"/> cursor into a rectangular box
over the map.
<br/>
<span style="text-align: center; display: inline;"><img src="assets/brushed_area_empty.png" width="40%"></span><br/>
The selected regions will be colored based on their accessibility scores. More information for the
selected regions will be shown on the right sidebar panel.
<br/> Click on any specific region to know more about a neighborhood.
</p>
<span class="action-instruction">Start Coloring!</span></p>
</div>
<div id="overall-stats">
<div class="left">
<p>
Data Coverage: <span>100%</span><br/>
Average Access Score: <span>89.7</span>
</p>
</div>
<div class="right">
<h3 class="know-more" onclick="showModal()">Know More</h3>
</div>
<br style="clear:both;"/>
</div>
</div>
<div id="legend">
<p style="text-align: center;">Access Scores</p>
<div id="color1" class="legend_div">
<div id="color-component1" class="color-component"></div>
<p> 0 - 20 </p>
</div>
<div id="color2" class="legend_div">
<div id="color-component2" class="color-component"></div>
<p> 20 - 40 </p>
</div>
<div id="color3" class="legend_div">
<div id="color-component3" class="color-component"></div>
<p> 40 - 60 </p>
</div>
<div id="color4" class="legend_div">
<div id="color-component4" class="color-component"></div>
<p> 60 - 80 </p>
</div>
<div id="color5" class="legend_div">
<div id="color-component5" class="color-component"></div>
<p> 80 - 90 </p>
</div>
<div id="color6" class="legend_div">
<div id="color-component6" class="color-component"></div>
<p> 90 - 100 </p>
</div>
<p class="annotation"> Least accessible (low score) to most accessible (high score)</p>
</div>
</div>
<div id="info-box" class="info-box box">
<p id="info-panel-instruction">Select/Click an area to know more!</p>
<p id="region-name"></p>
<p id="access-score"></p>
<p id="average-info"></p>
<div id='detail-pane'>
<button id="btn-toggle-view" name="toggle-view" onclick="zoomOutToMainView()">Back to Main Map</button>
<div id='detail-pane-info' class='detail-pane-info'>
<h4>Label Counts</h4>
<div id="CurbRamp"><span class="CurbRamp"></span> Curb Ramp: </div>
<div id="NoCurbRamp"><span class="NoCurbRamp"></span> Missing Curb Ramp: </div>
<div id="SurfaceProblem"><span class="SurfaceProblem"></span> Surface Problem: </div>
<div id="Obstacle"><span class="Obstacle"></span> Obstacle: </div>
<!--<svg id="label-counts"></svg>-->
</div>
</div>
<div id="viz-holder">
<div id="container1">
<p id="heading1"></p>
<svg id="top-5-graph"></svg>
<div id="tooltip" class="tooltip hidden"></div>
</div>
<div id="container2">
<p id="heading2"></p>
<svg id="histogram-holder"></svg>
<p>Total Neighborhoods: 179</p>
</div>
</div>
</div>
<div id="loading-icon"></div>
<!--<div id="ps-logo"><img src="assets/ps-logo.jpg"/></div>-->
<span id='toggle-buttons' class='hidden'>
<button id="toggle-streets" class="toggle-layer" onclick="toggleLayers('streets')">Toggle Streets</button>
<button id="toggle-attributes" class="toggle-layer"
onclick="toggleLayers('features')">Toggle Attribute Points</button>
</span>
<script src="javascript/geovis.js"></script>
<script src="javascript/drawing-functions.js" type="text/javascript"></script>
</body>
</html>