-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtest.html
More file actions
133 lines (114 loc) · 6.13 KB
/
Copy pathtest.html
File metadata and controls
133 lines (114 loc) · 6.13 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Datart</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/test.css">
<!--Fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<meta charset="utf-8" />
<!-- leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
<script src="https://use.fontawesome.com/1f6d93a05c.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
<!--Icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/0a3370db37.js" crossorigin="anonymous"></script>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!--Script-->
<script src="js/papaparse.min.js"></script>
<!-- classy brew -->
<script src="js/classybrew.js"></script>
<!-- apex charts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</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 active">
<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">
<a class="nav-link" href="about.html"><span>About</span></a>
</li>
</ul>
</div>
</nav>
</header>
<div class="regMap">
<h2>Main Map</h2>
<p>This map contains all of the art pieces from our data with images and descriptions. </p>
</div>
<div class="sidebar">
<div id="sideContent">
<h3>How to Use</h3>
<p>Click on any pin and information about it will appear here!</p>
</div>
</div>
<div class="content">
<div id="map"></div>
</div>
<script src="js/test.js"></script>
<!--Choropleth Map-->
<div class="Choromap_info">
<h2>Choropleth Map</h2>
<p >This map shows 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.</p>
</div>
<div class="dashboard">
<h3 class="map2_info"><b>Art Pieces by Decade Data</b></h3>
<p class="map2_info">To get started, hover on any county and data about it will appear here!</p>
</div>
<div class="Chorocontent">
<div id="choromap"></div>
</div>
<script src="js/choromap.js"></script>
<footer>
<small>This website is © 2021 by Annmarie Cong, Eustina Kim, and Michelle Lee</small>
</footer>
</body>
</html>