-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.html
More file actions
136 lines (125 loc) · 7.04 KB
/
Copy pathabout.html
File metadata and controls
136 lines (125 loc) · 7.04 KB
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>
<title>About Us</title>
<!--Logo-->
<link rel="icon" href="https://media.discordapp.net/attachments/694477786131202048/837892559014723594/Datart_Logo.png">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 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">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<!--Linking CSS file-->
<link rel="stylesheet" href="css/about.css">
<!--Fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
</head>
<body>
<!--Navbar-->
<header class="header">
<nav class="navbar navbar-expand navbar-light">
<a class="navbar-brand" href="index.html">
<h1><span id="D">D</span><span class="a">a</span><span class="t">t</span><span class="a">a</span><span id="r">r</span><span class="t">t</span>
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.5 20C26.5 27 24.7884 33.7762 19.6323 35.8915C9.8474 36.9492 2.11325 30.1919 1 19.1185C1 8.27961 9.50965 0 20.3177 0C29.3027 1.01408 29.5 13.5 23.5 20Z" fill="#F5C599"/>
<circle cx="21.1025" cy="4.8277" r="2" fill="#0460D9"/>
<circle cx="11.2737" cy="8.56018" r="2" fill="#03A688"/>
<circle cx="7" cy="18" r="2" fill="#F23847"/>
<circle cx="10" cy="27" r="2" fill="#BFB41B"/>
<circle cx="18.8291" cy="31.8477" r="2" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.2501 19.1251C35.2501 21.0738 34.4677 22.8399 33.2 24.1262L28.1251 31L23.0503 24.1264C21.7824 22.8401 21 21.0739 21 19.1251C21 15.19 24.19 12 28.1251 12C32.0601 12 35.2501 15.19 35.2501 19.1251ZM28.2016 22.3907C30.4018 22.3907 32.1855 20.6628 32.1855 18.5313C32.1855 16.3998 30.4018 14.6719 28.2016 14.6719C26.0013 14.6719 24.2177 16.3998 24.2177 18.5313C24.2177 20.6628 26.0013 22.3907 28.2016 22.3907Z" fill="#F23847"/>
</svg>
</h1>
</a>
<!--Responsive menu button-->
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button> -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html"><span>Home</span><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html"><span>#Gallery</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="team.html"><span>Team</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="about.html"><span>About</span><span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<article id="overview">
<div class="container">
<h2>Overview</h2>
<p>
Mapping is a great visualization method of location-based data.
Given that we want to showcase public art around Los Angeles,
we think web mapping will be a fun, interactive way for users to
enjoy our content. Mapping has advantages over traditional charts
and graphs in that it is extremely versatile in incorporating
multi-dimensional data, including spatial and temporal variables.
We hope this will allow users to get a deeper understanding of the
significance of public art installations in relation to where they
exist around LA.
</p>
<p>
We will be focusing on the Los Angeles County because as students at
UCLA, we are interested in exploring more of the art/culture that
surrounds the area.
</p>
</div>
</article>
<article id="instructions">
<div class="container">
<h3>How to Use Our Website</h3>
<p>
The maproom has two maps: the main map and the choropleth map. The main map
is meant to be used to explore art pieces in the Los Angeles county. To display
more information about the art, hover over and click on any pin on the map and it
will appear on the side panel. Clicking the 'Current Street View' button opens a new
window that shows the current Google Street View of the art. If you want an random
art recommended, press the 'Surprise Me' button on the upper left side of the map and
the information about the art will appear on the right panel. The checkbox on the upper
right shows different ways to filter the locations: the red points correspond to art pieces
created before 2000, the blue points correspond to art created after 2000, and checking
'Cluster' will show a clustered map.
</p>
<p>
The choropleth shows more data about the public art pieces as it displays the number
of public art pieces per neighborhood in the LA county, along with an interactive bar chart to
show the progression of art over time for each neighborhood. Hover over any neighborhood and the
corresponding bar chart will appear on the right panel.
</p>
<p>
The #Gallery page offers an aggregated view of the public art pieces. Search any neighbhorhood in the
Los Angeles county and it will filter the data to only include the pieces from there. Hover over
the photos to get more information about a piece and click on it to see its location on the
main map page.
</p>
</div>
</article>
<article id="sources">
<div class="container">
<h3>Sources Used</h3>
<ul>
<li>Dataset 1: <a href="https://docs.google.com/spreadsheets/d/1evnaHh-HV6cwoFSC8Jy_wAuR9916uogwbV_4nGCjb-A/edit#gid=450383580" target="_blank" rel="noopener noreferrer nofollow" >Nancy Tovar East LA Mural Collection</a></li>
<li>Dataset 2: <a href="https://data.weho.org/Art/Urban-Art-Locations/twt6-v6gc" target="_blank" rel="noopener noreferrer nofollow">Art Locations - City of West Hollywood</a></li>
<li>Dataset 3: <a href="https://raw.githubusercontent.com/yohman/21S-DH151/main/Weeks/Week04/Lab/data/dunitz.csv" target="_blank" rel="noopener noreferrer nofollow">Robin Dunitz Slides of Los Angeles Murals, 1925-2002</a></li>
</ul>
</div>
</article>
</main>
</body>
</html>