-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
82 lines (82 loc) · 5.66 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
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="bat.ico" type="image/x-icon">
<title>ActiveMaps</title>
<link rel="stylesheet" href="js/activemaps.css" />
<link rel="stylesheet" href="js/leaflet.css" />
<link rel="stylesheet" href="js/nv.d3.css" />
<link rel="stylesheet" href="js/colorbox.css" />
<link rel="stylesheet" href="js/jquery-ui.css" />
</head>
<body>
<div id="map" style="width:100%; height:100%; position:fixed; left:0; top:0; overflow:hidden;"></div>
<div id=metainfo unselectable="on" class="unselectable" style="border-width: thin; border-color: #262626; border-style: solid; position: absolute; left: 45px; top: 10px; background-color: #262626; color: white; font-size: 24px; font-family: Arial; text-shadow: 2px 2px #888; border-radius: 4px;">01:00</div>
<div id="slider" style="position: absolute; top: 17px; left: 120px; width:240px;"></div>
<!--<div id="legend" class="info legend" style="position: absolute; top: 10px; right: 10px;"></div>-->
<div id="regionchooser" style="position:absolute; left: 45px; top: 45px; border-width: thin; border-color: #262626; border-style: solid; background-color: #262626; font-family: Arial; font-size: 14px; border-radius: 4px; color: white;">
Region:<br>
<select style="width: 100px;">
<option value=newyork>New York</option>
<option value=mexicocity>Mexico City</option>
<option value=bayarea>Bay Area</option>
<option value=losangeles>Los Angeles</option>
<option value=sandiego>San Diego</option>
<option value=sacramento>Sacramento</option>
<option value=bakersfield>Bakersfield</option>
<option value=fresno>Fresno</option>
<option value=monterey>Monterey</option>
</select>
</div>
<div id="modechart" style="position:absolute; top: 8px; right: 8px; height: 250px; width:250px; background-color: rgba(255,255,255,.85)"><svg></svg></div>
<div id="agechart" style="display: none;position:absolute; top: 266px; right: 8px; height: 250px; width:250px; background-color: rgba(255,255,255,.85)"><svg></svg></div>
<div id="incomechooser" style="position:absolute; left: 155px; top: 45px; border-width: thin; border-color: #262626; border-style: solid; background-color: #262626; font-family: Arial; font-size: 14px; border-radius: 4px; color: white;">
Household Income:<br>
<select style="width: 110px;">
<option value=1>up to 15k</option>
<option value=2>15k to 30k</option>
<option value=3>30k to 50k</option>
<option value=4>50k to 75k</option>
<option value=5 selected>75k to 100k</option>
<option value=6>100k to 150k</option>
<option value=7>150k to 200k</option>
<option value=8>200k and up</option>
</select>
</div>
<div>
<p><a style="position:absolute; left: 0px; bottom: 0px; border-radius: 4px;" href="http://www.synthicity.com"><img height=23px src="images/logo.png"/></a></p>
</div>
<div>
<p><a style="position:absolute; left: 362px; top: 8px;" href="javascript:play();"><img height=33px src="images/button_black_play.png"/></a></p>
</div>
<div>
<p><a style="position:absolute; left: 392px; top: 8px;" href="javascript:stop();"><img height=33px src="images/button_black_stop.png"/></a></p>
</div>
<div>
<p><a class='inline' style="position:absolute; left: 11px; top: 70px;" href="#inline_content"><img height=23px src="qmark.ico"/></a></p>
</div>
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
<p><strong>This page visualizes the public version of the travel diaries for households that participated in the 2010 NYMTC Travel Survey as well as the 2010 California Household Travel Survey.</strong></p>
<p><i>Because this is the public data, positions are actually randomized within census tracts; exact lat-long locations are not accurate in order to protect the privacy of the individual survey takers. The modifications should not affect the general patterns of travel by income, mode, or time of day.</i></p>
<p>You can advance the time of day by dragging the time slider from left to right and change the range of household incomes that are displayed using the drop down box.</p>
<p>Each circle represents a person and is sized relative to the age of the person. Look closely and you can see a parent (large circle) traveling with a child (small circle).
<p>Circles are colored by the last transportation mode taken by each person (see legend). The "home" mode is used for people who haven't left home and do not have a mode yet. Notice that mode colors will be inaccurate when moving the slider *backwards* in time.</p>
<p><i>The speed of each trip is not accounted for when moving the circles - each animation takes the same amount of time no matter the duration of the trip.</i></p>
<p>Many thanks to <a href="http://www.synthicity.com">Synthicity</a> for supporting my work on this project and for the <a href=http://vudlab.com/#/">vudlab</a> for inspiring me to try this. Additional thanks to Nicholas Tapia for helping with the New York data.<br><br>Email me - Fletcher Foti - at ffoti @ berkeley.edu or help me make this project better on <a href="https://github.com/fscottfoti/activemaps">github</a>.
<p><a href="#" onclick="$.colorbox.close();" color=black>Close</a></p>
</div>
</div>
</pre>
<script src="js/leaflet.js"></script>
<script type="text/javascript" src="js/tile.stamen.js"></script>
<script src="js/d3.v3.js"></script>
<script src="js/nv.d3.js"></script>
<script src="js/topojson.v1.min.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.colorbox.js"></script>
<script src="js/activemaps_config.js"></script>
<script src="js/activemaps.js"></script>
</body>
</html>