-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcs5124-project1.html
More file actions
253 lines (244 loc) · 16.4 KB
/
Copy pathcs5124-project1.html
File metadata and controls
253 lines (244 loc) · 16.4 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="CS5124 Data Visualization Project 1 - Interactive earthquake data visualization using D3.js, choropleth maps, and data analytics by Andrew Pipo.">
<meta name="keywords" content="Data Visualization, D3.js, Earthquake Data, Choropleth Map, CS5124, Interactive Visualization">
<meta name="author" content="Andrew T. Pipo">
<meta name="theme-color" content="#b50000">
<title>Andrew T. Pipo - Data Visualization Project 1</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav class="col-md-3 col-lg-2 d-md-block bg-dark sidebar collapse" id="sidebarMenu">
<div class="position-sticky">
<br>
<img src="UC_CEAS.png" alt="UC CEAS Logo" style="max-width: 100%; background-color: white;">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="index.html">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutme.html">
About Me
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Pipo_Andrew_Resume_2025.pdf">
Resume
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cs5002.html">
Smart Parking System (CS5001/CS5002)
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#DV" role="button" aria-expanded="false" aria-controls="DV">
CS5124 - Data Visualization
</a>
<div class="collapse" id="DV">
<ul class="nav flex-column ms-3">
<li class="nav-item">
<a class="nav-link" href="cs5124-vis-wild.html">Vis in the Wild</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cs5124-project1.html">Project 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cs5124-project2.html">Project 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cs5124-project3.html">Project 3</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#UI" role="button" aria-expanded="false" aria-controls="UI">
CS5167 - UI Portfolio
</a>
<div class="collapse" id="UI">
<ul class="nav flex-column ms-3">
<li class="nav-item">
<a class="nav-link" href="cs5167-project1.html">Project 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cs5167-project2.html">Project 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cs5167-project3.html">Project 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cs5167-project4.html">Project 4</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#ENED" role="button" aria-expanded="false" aria-controls="ENED">
ENED Portfolio
</a>
<div class="collapse" id="ENED">
<ul class="nav flex-column ms-3">
<li class="nav-item">
<a class="nav-link" href="https://ucba-ened1100.github.io/" target="_blank" rel="noopener noreferrer">ENED1100</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://ucba-ened1120.github.io/" target="_blank" rel="noopener noreferrer">ENED1120</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#projects" role="button" aria-expanded="false" aria-controls="projects">
Notable Projects
</a>
<div class="collapse" id="projects">
<ul class="nav flex-column ms-3">
<li class="nav-item">
<a class="nav-link" href="https://github.com/PipoAT/SQLite-Database-Tool" target="_blank" rel="noopener noreferrer">SQLite Database Tool</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/PipoAT/Ethernet-Communication-Tool" target="_blank" rel="noopener noreferrer">Ethernet Communication Tool</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/PipoAT/ENED_DemoTeam_Assignment" target="_blank" rel="noopener noreferrer">ENED Team Assignment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/PipoAT/Evershade" target="_blank" rel="noopener noreferrer">Evershade</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#externallinks" role="button" aria-expanded="false" aria-controls="externallinks">
External Links
</a>
<div class="collapse" id="externallinks">
<ul class="nav flex-column ms-3">
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="https://www.linkedin.com/in/andrew-pipo/" target="_blank" rel="noopener noreferrer">
<img src="background-files/InBug-White.png" alt="LinkedIn" style="width: 20px; height: 20px; margin-right: 8px;">
LinkedIn
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="https://github.com/PipoAT" target="_blank" rel="noopener noreferrer">
<img src="background-files/github-mark-white.png" alt="GitHub" style="width: 20px; height: 20px; margin-right: 8px;">
GitHub
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
<button class="btn btn-dark d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation" style="transition: transform 0.3s;">
<span class="navbar-toggler-icon" style="background-color: white; width: 30px; height: 3px; display: block; margin: 5px auto;"></span>
</button>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="header text-center rounded border p-3 my-3">
<h1>Data Visualization</h1>
<h2>Project 1: Data in the USA</h2>
</div>
<div class="main-content rounded border p-3 my-3">
<div class="row">
<div class="col-md-4">
<h3>Project Links</h3>
<a href="https://github.com/PipoAT/CS5124-Project-1">Source Code hosted on GitHub</a>
<br>
<a href="https://youtu.be/1_qOup4Yqqk">Demonstration</a>
<br>
<a href="https://cs-5124-project-1.vercel.app/">Live Application</a>
<br>
<br>
<h3>Use of AI and Collaboration</h3>
<p>AI tools including ChatGPT and Copilot were used to help debug the choropleth map code, and help improve the UI/UX. AI was also utilized to help develop the documentation as the documentation is presented in an HTML format for my portfolio website</p>
<br>
</div>
<div class="col-md-4">
<h3>Overview</h3>
<p>This web application provides interactive visualizations to explore socioeconomic and health data across U.S. counties. The visualizations include:</p>
<ul>
<li><strong>Choropleth Map:</strong> Displays geographic data using color gradients.</li>
<img src="cs5124-files/Graph1.png" alt="Choropleth Map" style="max-width: 100%;">
<li><strong>Scatterplot:</strong> Shows relationships between two variables.</li>
<img src="cs5124-files/Graph2.png" alt="Scatterplot" style="max-width: 100%;">
<li><strong>Histogram:</strong> Displays data distribution.</li>
<img src="cs5124-files/Graph3.png" alt="Histogram" style="max-width: 100%;">
</ul>
<br>
<p>The motivation behind this application is to explore how income influences other socioeconomic factors such as health, employment, and education. By providing an interactive visualization, users can uncover relationships between income levels and various demographic indicators.</p>
</div>
<div class="col-md-4">
<h3>Data Sources</h3>
<p>The datasets used in this application include:</p>
<ul>
<li><a href="https://www.ers.usda.gov/data-products/atlas-of-rural-and-small-town-america/">USDA Atlas of Rural and Small-Town America</a> (Socioeconomic Data).</li>
<li><a href="https://www.cdc.gov/dhdsp/maps/atlas/index.htm">US Heart and Stroke Atlas</a> (Health and Healthcare Data).</li>
</ul>
<br>
<h3>Technology Stack</h3>
<ul>
<li><strong>D3.js:</strong> Data visualization library.</li>
<li><strong>JavaScript:</strong> Handles interactivity.</li>
<li><strong>HTML & CSS:</strong> Provides structure and styling.</li>
</ul>
<br>
<h3>Process</h3>
<ul>
<li><strong>Libraries used:</strong> D3.js, JavaScript, HTML, CSS.</li>
<li><strong>Additional Frameworks:</strong> Bootstrap</li>
<li><strong>Code structure:</strong> The application is divided into modules for data loading, visualization, and interactivity.</li>
<li><strong>Deployment:</strong> Hosted on <strong>Vercel</strong>, with source code available on <a href="https://github.com/PipoAT/CS5124-Project-1">GitHub</a>.</li>
</ul>
</div>
</div>
<br>
<hr>
<div class="row">
<div class="col-md-4">
<h3>Features</h3>
<br>
<h4>1. Choropleth Map</h4>
<p>The map displays counties color-coded based on selected attributes, such as income levels or healthcare access.</p>
<h4>2. Scatterplot</h4>
<p>Users can compare two attributes, such as median income vs. obesity rates, by selecting them from dropdown menus.</p>
<h4>3. Histogram</h4>
<p>Shows the frequency distribution of selected socioeconomic attributes.</p>
<br>
<h4>Attribute Selection</h4>
<p>Users can select what attribute they would like to compare the economic data against to see the impact it has on other aspects of life.</p>
<img src="cs5124-files/select.png" alt="Histogram" style="max-width: 100%;">
</div>
<div class="col-md-4">
<h3>Challenges</h3>
<p>There was difficulty in implementing the choropleth map and significnat amount of time was spent debugging the code to fully understand where the data for the graph was being saved to be properly called within the JavaScript code. This issue took up a significant portion of development time.</p>
<p>There was also difficulty in having the graphs properly update the titles/text, despire the actual data changing as expected</p>
</div>
<div class="col-md-4">
<h3>Future Work</h3>
<ul>
<li>Expanding the dataset to include more recent statistics.</li>
<li>Enhancing UI/UX with additional filtering and customization options.</li>
<li>Enhancing UI/UX with improved layout for user friendliness</li>
<li>Address bugs/issues with updating graphs producing extra white space</li>
<li>Adjust graphs for improved representation via color choice</li>
</ul>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</html>