-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
135 lines (125 loc) · 7.27 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="D3_Scatterplot/css/balls.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
<title>Project PRISM Home</title>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="index.html">Project PRISM</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="Data.html">Data <span class="sr-only">(current)</span></a>
</li>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Team JABAscript
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="Jabascript.html"> About the Team</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="Justin.html">Justin Acance</a>
<a class="dropdown-item" href="Alicia.html">Alicia Ly</a>
<a class="dropdown-item" href="Rob.html">Robert Orgain</a>
<a class="dropdown-item" href="Alexei.html">Alexei Flores</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Visualizations
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="Comparisons.html"> Results Home</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="Alexei.html">Migration Flows in the US</a>
<a class="dropdown-item" href="Justin.html">An Atlas of US Migration Data</a>
<a class="dropdown-item" href="Rob.html">Migration Factors</a>
<a class="dropdown-item" href="Alicia.html">A Map of Median Income</a>
</div>
</li>
<div class="ball one"></div>
<div class="ball two"></div>
<div class="ball three"></div>
</nav>
</head>
<div class="hero text-center">
<h1>Project PRISM</h1>
<h1>Project for Plotting to Re-imagine Inter-State Migrations</h1>
</div>
<body>
<div class="container">
<!-- Row 1 -->
<div class="row">
<div class="col-md-12">
<h2>About the Project</h2>
<p> Project PRISM aspires to use data visualization to de-mystify the phenomenon of geographic mobility in the United States. The vastness of the North American continent
is a quintessential part of the American national identity. Every year, tens of thousands of Americans pack up and move to different cities, counties, and states. To better understand this phenomenon,
the team makes use of data visualization techniques to make the extent and scale of this phenomenon easier to comprehend and iunderstand who the Americans migrating are, where they are going, and infer why they are moving.
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-9">
<div id="scatter">
<!-- We append our chart here. -->
</div>
<p> Project PRISM aspires to use data visualization to de-mystify the phenomenon of geographic mobility in the United States. The vastness of the North American continent
is a quintessential part of the American national identity. Every year, tens of thousands of Americans pack up and move to different cities, counties, and states. To better understand this phenomenon,
the team makes use of data visualization techniques to make the extent and scale of this phenomenon easier to comprehend and iunderstand who the Americans migrating are, where they are going, and infer why they are moving.
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-9">
<div id="map">
<!-- We append our chart here. -->
</div>
<p>On the balance, PRISM seeks to facilitate the formation of informed opinion. The project presents the data in a form comprehensible to regular people; but doesn't deign to make a definitive conclusion
The user is invited to look at the team's work; and to draw their own educated conclusions. Of course, explanations for the charts are offeredto contextualize the data; but they will do no more than describe the data and offer theories about it </p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-9">
<p>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-9">
<div id="bar">
<!-- We append our chart here. -->
</div>
<p>Plot 1.2: this chart shows ...
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-9">
<div id="line">
<!-- We append our chart here. -->
</div>
<p>Plot 1.3: this chart shows ...
</p>
</div>
</div>
</div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript" src="static/js/plots.js"></script>
<script type="text/javascript" src="static/js/config.js"></script>
<script type="text/javascript" src="D3_ScatterPlot/js/balls.js"></script>
</body>
</html>