Retail Insights - Final Project by Frank Chen

README.md

@@ -1,42 +1,40 @@
 # User Engagement Project
 
-Your final project for the class will incorporate deeper user engegement. The project should build upon many of the concepts learned throughout the class, incorporate some significant amount of interactivity, and storing and recalling data in a way that multiple users of the application can benefit from. _The focus of this project will be on engagement -- i.e. inviting members of the public to create or add to a dataset in some way._
+by Frank Chen
 
-For this project you may extend your story map or your dashboard, as long as you have some realistic addition of functionality that allows for user engagement. You may also start a new project.
+## Project Description
+Welcome to **Retail Insights**, an interactive web platform designed to visualize and analyze critical trends in local economies and consumer behavior over the past five years. By mapping income changes, customer numbers, median spending, and dwell time in stores, our tool provides valuable insights for **small business owners**, **urban planners**, **researchers**, and **engaged consumers**. 
 
-## Timeline
+What sets Retail Insights apart is its community-driven approach—users can actively contribute their own spending habits and in-store experiences, enriching the dataset and fostering a collaborative environment. This project not only empowers businesses and policymakers with data-driven decision-making capabilities but also enhances consumer awareness and participation in shaping their local economic landscape.
 
-- This project will take us through the end of the semester on **December 4**, when we will have project presentations.
-- To help you with your timeline, here are some milestones:
-  - **October 30**: Project proposal due
-  - **November 6**: Initial wireframes due
-  - **November 20**: Plan for completion
-  - **December 4**: Project presentations
+Join us in building a comprehensive, real-time picture of our community’s economic health and consumer dynamics through your valuable contributions.
 
-## Instructions
+## Data Sources
 
-Fork this repository, and add your project code to it. When you are ready to submit your project, refer to the Submission Checklist below.
+I use two data sets from Dewey, a big data platform which is accessible to all PennID holders. I use API to acquire the data of July of each year, and the total size would be hundreds of gigabytes. The two data sets are:
 
-## Project Proposal
+1. [ADVAN monthly foot traffic data](https://app.deweydata.io/products/5acc9f39-1ca6-4535-b3ff-38f6b9baf85e/package). It includes aggregated raw counts of visits to POIs from a panel of mobile devices over a given month, detailing how often people visit, how long they stay, where they came from, where else they go, and more.
 
-You proposal doesn't have to be deep. It should:
-1.  Make clear who the user of your project is. This should be more specific that "the general public". Refer to the [18F Method Card on Personas](https://guides.18f.gov/methods/decide/personas/) or the Digtal.gov article on [Improving Customer Experience with Digital Personas](https://digital.gov/2017/06/20/improving-customer-experience-with-digital-personas/).
-2. Describe what you'll be doing in your tool to meet your user's needs.
-3. Describe any datasets that you will be working with, including any data that users will put in.
+2. [SafeGraph monthly spend patterns data](https://app.deweydata.io/products/eb6e748a-0fdd-4bc7-9dd7-bbed0890948d/package). It includes aggregated, anonymized credit and debit transaction data associated to specific POIs, including median spend per day, median spend per customer, and other detailed statistics, as well as where else consumers spend money and the breakdown of online/offline spending.
 
-## Initial Wireframes
+The two data sets can be joined by a shared column called PlaceKey, which is the unique and persistent ID tied to a POI.
 
-Use wireframes to show what your project or your new feature will look like. You can use any tool you like to create these wireframes. 
+The images are from [Visit Philadelphia](https://www.visitphilly.com/).
 
-## Plan for Completion
+## How to Use
 
-Describe what you will need to do to complete your project. This should include a list of tasks that you will need to complete, and a timeline for when you will complete them. I suggest using a tool like GitHub Projects to list out and manage your tasks/issues.
+Upon visiting the website, you'll encounter an introduction page. Scroll down to learn more, and click the button to navigate to the dashboard.
 
-## Submission Checklist
+### Dashboard Features
 
-- [ ] Pushed latest code to the `main` branch of your repository
-- [ ] Linted JS and CSS code
-- [ ] Turned on GitHub Pages for the repository and verified that your site works when deployed
-- [ ] Submitted a pull request to the original repository in the class organization
-- [ ] In the PR **title**, included your name at least
-- [ ] In the PR **description**, included a brief description of your topic, and your target audience
+- **Interactive Map:** The dashboard displays a map with Points of Interest (POIs) marked.
+- **Year Selection:** Use the dropdown in the top-left corner to select a specific year and visualize data for that period.
+- **Selecting POIs:**
+  - **Map Click:** Click directly on a POI marker on the map.
+  - **Search Bar:** Alternatively, search for a POI by name using the search bar at the top.
+- **POI Details:** Once a POI is selected, detailed information will appear on the right side of the map.
+- **Data Trends:** Below the map and detailed information, you can view the trend data for the selected POI over the past five years.
+
+### Contribute to the Project
+
+We welcome your contributions! Click the red **"TAKE SURVEY"** button at the top of the page to participate. By completing the survey, you can share your spending habits and in-store time. Your responses will be added to our dataset and visualized on the map, helping to enhance the project.

assets/css/dashboard.css

@@ -0,0 +1,284 @@
+/* Global Styles */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  height: 100vh;
+  font-family: Lato, sans-serif;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Navbar Styles */
+nav {
+  width: 100%;
+}
+
+.navbar {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  background-color: #333;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.navbar li {
+  margin: 0;
+}
+
+.navbar li a {
+  display: block;
+  padding: 14px 20px;
+  color: white;
+  text-decoration: none;
+}
+
+.navbar li a:hover {
+  background-color: #111;
+}
+
+/* Controls Styles */
+.controls {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  gap: 20px; /* Use gap for spacing between elements */
+}
+
+.controls select {
+  padding: 8px;
+  font-size: 16px;
+}
+
+.search-container {
+  position: relative;
+  width: 300px;
+}
+
+#search-input {
+  width: 100%;
+  padding: 8px;
+  font-size: 16px;
+}
+
+.suggestions {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  border: 1px solid #ccc;
+  border-top: none;
+  max-height: 200px;
+  overflow-y: auto;
+  background-color: white;
+  position: absolute;
+  width: 100%;
+  z-index: 1000;
+}
+
+.suggestions li {
+  padding: 8px;
+  cursor: pointer;
+}
+
+.suggestions li:hover {
+  background-color: #f0f0f0;
+}
+
+/* Map and Info Box */
+.map-info-container {
+  display: flex;
+  flex: 1;
+  min-height: 600px; /* Optional: Set a minimum height */
+}
+
+.map-container {
+  width: 65%; 
+  height: 100%; /* Ensures it takes full height of the container */
+  position: relative;
+}
+
+#map {
+  width: 100%;
+  height: 100%;
+}
+
+.info-box {
+  width: 35%;
+  padding: 20px;
+  flex: 1; 
+  border: 1px solid #ccc;
+  background-color: #f9f9f9;
+  max-height: 100%;
+  box-sizing: border-box;
+}
+
+.info-box h2 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+#info-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+#info-table th, #info-table td {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+#info-table th {
+  background-color: #f2f2f2;
+  text-align: left;
+}
+
+#info-table tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+#info-table tr:hover {
+  background-color: #ddd;
+}
+
+/* Chart Grid */
+.chart-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  padding: 20px;
+}
+
+.chart-item {
+  border: 1px solid #ccc;
+  padding: 10px;
+  background-color: #f9f9f9;
+  min-height: 300px; /* Ensure enough space for charts */
+  position: relative; /* To position SVGs correctly */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chart-item svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Tooltip styling */
+.tooltip {
+  position: absolute;
+  text-align: center;
+  padding: 6px;
+  font: 12px sans-serif;
+  background: rgb(0 0 0 / 70%);
+  color: #fff;
+  border: 0;
+  border-radius: 4px;
+  pointer-events: none;
+  z-index: 10;
+}
+
+
+/* Legend Styles */
+.legend-box {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  background-color: white;
+  border: 1px solid gray;
+  padding: 10px;
+  z-index: 1000;
+  box-shadow: 0 0 10px rgb(0 0 0 / 10%);
+  font-size: 1em;
+  width: 180px;
+}
+
+.legend-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px;
+  margin-bottom: 3px;
+  background-color: rgb(255 255 255 / 80%);
+  color: gray;
+}
+
+.legend-color {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+  background-color: gray; /* default color */
+}
+
+.legend-item.highlight {
+  color: black;
+  font-weight: bold;
+}
+
+.legend-title {
+  font-size: 1.02rem;
+  font-weight: 300;
+  margin-bottom: 0.5rem;
+  text-align: left;
+}
+
+/* Popup Window */
+.popup {
+  display: flex;
+  position: fixed;
+  top: 20%;
+  left: 50%;
+  transform: translate(-50%, -20%);
+  width: 300px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
+  z-index: 2000;
+  padding: 20px;
+  flex-direction: column;
+}
+
+.popup.hidden {
+  display: none;
+}
+
+.popup-content h3 {
+  margin-top: 0;
+  text-align: center;
+}
+
+.popup-content label {
+  margin: 8px 0 4px;
+  font-weight: bold;
+}
+
+.popup-content input {
+  padding: 8px;
+  width: 100%;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.popup-content button {
+  padding: 8px;
+  cursor: pointer;
+}
+
+#survey-button {
+  background-color: #ff6f61;
+  color: #fff; 
+  font-size: 1.2em;
+  font-weight: bold; 
+  padding: 12px 20px; 
+  border: none; 
+  box-shadow: 0 4px 6px rgb(0 0 0 / 20%);
+  text-transform: uppercase; 
+  cursor: pointer;
+  transition: all 0.3s ease;
+}