-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
93 lines (86 loc) · 4.25 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Oswald|Lato|Merriweather' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css">
<title>A Walk in the Park</title>
<script src="d3.js" charset="utf-8"></script>
<script src="https://d3js.org/d3-queue.v3.min.js"></script>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="shortcut icon" type="image/png" href="favicon-16x16.png">
<link rel="shortcut icon" href="favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#0c1733">
</head>
<body>
<div class = "content">
<div class = "row" style = "margin-bottom: 20px;">
<h1>A Walk in The Park</h1>
<span class = "bodyText">
"The Park" is an amusement park with different attractions —
<span style = "color: #e41a1c; font-weight: bold;">thrill rides</span>,
<span style = "color: #377eb8; font-weight: bold;">rides for everyone</span>,
<span style = "color: #4daf4a; font-weight: bold;">kiddie rides</span>,
<span style = "color: #984ea3; font-weight: bold;">shows & entertainment</span> and
<span style = "color: #555; font-weight: bold;">more</span>.
This visualization shows the visitor's activity at those different attractions
during one fateful weekend in June. To the shock of everyone, a terrible crime happened on
Sunday morning in Creighton Pavilion. Can we see it? What happened in the park afterwards?
</span>
</div>
<div class = "row", style = "white-space : nowrap;">
<div style="display: inline-block; width: 1000px; white-space: normal; vertical-align: top;">
<h2>Number of Visitors</h2>
<span class = "infoText">
<strong style="color:#333">Total</strong> number of visitors,
and visitors at <span class = "focusLocName">…</span> per 10 min interval.
Brush to select time window for other plots.
</span>
</div>
<div style="display: inline-block; width: 300px; white-space: normal; vertical-align: top; margin-left: 50px;">
<h2>Visitor Location</h2>
<span class = "infoText">
Heatmap shows number of unique visitors. Circles indicate attractions.
</span>
</div>
</div>
<div class = "row" style = "white-space : nowrap;">
<div style="display: inline-block; width: 1000px; white-space: normal; vertical-align: top;">
<div id = "contextVis"></div>
</div>
<div style="display: inline-block; width: 300px; white-space: normal; vertical-align: top; margin-left: 50px;">
<div id = "locationVis"></div>
</div>
</div>
<div class = "row">
<h2>
Visitor flow to and from <span class = "focusLocName">…</span> between
<span id = "rangeStart">...</span> and <span id = "rangeEnd">…</span>
</h2>
<span class = "infoText">
Circles show other attractions.
Heatmap in center shows total number of check-ins (top) and check-outs (bottom) by
<strong><span class = "timeInterval">60 min</span> interval</strong>.
(Tip: Resolution increases when smaller window is selected.)
Attractions are sorted by walking distance from the selected loation.
Click other attractions to change focus. Hover attractions or time bins to filter connections.
</span>
<div id = "flowVis"></div>
</div>
<div class = "footer">
Icon "ferris wheel" made by <a href="https://www.flaticon.com/authors/smalllikeart" title="smalllikeart">smalllikeart</a>
from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by
<a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
</div>
</div>
<script type="text/javascript" src="contextVis.js"></script>
<script type="text/javascript" src="flowVis.js"></script>
<script type="text/javascript" src="locationVis.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>