Skip to content

Interactive Dashboard by Xinyu Bai #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
xinyubbupenn wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Interactive Dashboard by Xinyu Bai #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 60 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,60 @@
Add a readme for your engagement tool here. Include content overview, data citations, and any relevant technical details.
# 🎄 Philadelphia Restaurants Explorer

An interactive web application designed to help locals and tourists discover, filter, and save their favorite businesses in Philadelphia. Powered by the Yelp Academic Dataset, this project transforms raw data into a festive, user-friendly geospatial dashboard.

## 📖 Project Overview

This application visualizes thousands of businesses on an interactive map, allowing users to filter by cuisine, rating, and amenities. It features a "Wishlist" system that lets users save their favorite spots for later planning—perfect for organizing holiday dinners or weekend trips.

## 🎯 Target Audience

* **Foodies & Explorers:** People looking for specific cuisines or highly-rated hidden gems in the city.
* **Tourists:** Visitors who need a visual guide to find reputable businesses near their location.
* **Holiday Planners:** Users organizing festive gatherings who need to filter venues by specific features (e.g., "Good for Groups", "Has TV") and save them to a wishlist.

## ✨ Key Features

* **Interactive Map:** Built with Leaflet.js and MarkerCluster to efficiently handle thousands of data points.
* **Smart Filtering:**
* **Cuisine Type:** Filter by American, Chinese, Italian, and more using modern capsule buttons.
* **Amenities:** Filter by features like "Outdoor Seating", "Kids Friendly", or "Takeout".
* **Rating Slider:** Easily filter out businesses below a certain star rating.
* **Search:** Real-time search by business name or street address.
* **My Wishlist (Favorites):** Save interesting spots to a personal "Wishlist" which persists via local storage.
* **Holiday Theme:** A custom festive UI with a snowy header, Christmas color palette, and themed micro-interactions.
* **Data Validation:** Displays real-time counts of loaded businesses to verify data integrity.

## 🛠️ Technology Stack

* **Frontend:** HTML5, CSS3 (Flexbox/Grid), JavaScript (ES6+)
* **Mapping Library:** Leaflet.js & Leaflet.markercluster
* **Data Source:** Yelp Academic Dataset (processed via Python to extract Philadelphia records)
* **No Build Tools Required:** Runs directly in the browser with a simple local server.

## 🚀 How to Run

1. **Clone or Download** this repository.
2. Ensure the `data/philly_business.json` file is present (generated from the Yelp dataset).
3. Because of browser security policies (CORS), you cannot open `index.html` directly. You must run a local server.
4. Open your browser and navigate to `http://localhost:[port]`.

## 📂 File Structure

**Plaintext**

```
/
├── index.html # Main Map Dashboard
├── favorites.html # Wishlist Page
├── about.html # Project Information
├── css/
│ └── style.css # Custom Styles (Christmas Theme)
├── js/
│ └── map.js # Core Logic (Map, Filters, Favorites)
└── data/
└── philly_business.json # Processed JSON Data
```

---

Happy Holidays & Happy Exploring! 🎅✨
51 changes: 51 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About - Philadelphia Business Explorer</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&display=swap" rel="stylesheet">
</head>
<body>

<header class="app-header">
<div class="brand">🎅 Taste of Philly: Delicacy Wonderland </div>
<nav class="nav-links">
<a href="index.html" class="nav-item">Map 🗺️</a>
<a href="favorites.html" class="nav-item">My Dining Wishlist 💖</a>
<a href="about.html" class="nav-item active">About 🎁</a>
</nav>
</header>

<div class="page-content">
<h1 class="page-title">ℹ️ About This Project</h1>

<div class="about-section">
<h2>The Mission</h2>
<p>
The Philadelphia Business Explorer is an interactive dashboard designed to help locals and tourists alike discover the best spots in the city.
Utilizing geospatial data, users can filter restaurants, cafes, and shops by cuisine, rating, and location.
</p>

<h2 style="margin-top:30px;">Data Source</h2>
<p>
This application is powered by the <strong>Yelp Academic Dataset</strong>.
The data includes detailed information about businesses, including location coordinates, review counts, star ratings, and category tags.
</p>

<h2 style="margin-top:30px;">Technology Stack</h2>
<p>This project is built with lightweight, modern web technologies:</p>
<div class="tech-stack">
<span class="tag">HTML5</span>
<span class="tag">CSS3 (Flexbox/Grid)</span>
<span class="tag">JavaScript (ES6+)</span>
<span class="tag">Leaflet.js</span>
<span class="tag">OpenStreetMap</span>
</div>

</div>
</div>
</body>
</html>
Loading