Hello all and thank you for your time for viewing our project! Our team worked on creating a solution for CareerRise to create a centralized dashboard to view the economic mobility trends in the counties of metro Atlanta, CareerRise Advance!.
Since this application is a dashboard/web application, we would need to run the frontend and the backend locally in order to view the application effectively. To do this, first clone the repository for our project with the following command: git clone https://github.com/cfgcolumbus25/Team-2
Once the repo is cloned, you will be in the root directory where you will see multiple folder. Next, you would want to enter the front end directory: cd frontend. Then, you will want to install the dependencies necessary: npm install. Then, you want to run the localhost server: npm run dev. Once you do this, you can press the url in the terminal, and it should be accessible through here: http://localhost:5173/
Once the frontend is running locally, in order to effectively interact with the application, we would need to run the backend with FastAPI/Uvicorn. In order to do this, you would need to install a virtual environment and install the requirements for the application and its dependencies.
To configure the virtual environment: python3 -m venv .venv
To activate the virtual environment: source .venv/bin/activate
Once this has been done, you will need to install the requirements.txt in the root directory of the project with the following command: pip install -r "requirements.txt" OR pip3 install -r "requirements.txt"
Once the backend server has successfully ran, you will be good to access and interact with the frontend and see the actual data in the frontend application working with the FastAPI server.
Once the requirements have been installed, you will be ready to run the FastAPI server with the following command: fastapi dev main.py
For U.S Bureau API Key use, create a .env file locally and add the API key in that file (this can be retrieved in #backend on discord server), do not commit the .env file to this repository.
##interactivity/usages UI Components
Heat Map (Main Visualization)
Displays the 29 Metro Atlanta counties as polygons on a map (using GeoJSON).
Each county is color-coded based on its EM score, creating a gradient that represents relative mobility (e.g., red = low, green = high).
The map automatically updates whenever the year toggle changes, fetching new EM scores from the backend.
Hovering over a county highlights it and shows its name and current EM score in a tooltip.
Clicking a county expands a side panel with more detailed insights (see below).
Overview
The dashboard visualizes Economic Mobility (EM) Scores across the 29-county Metro Atlanta region, helping users explore how opportunities and outcomes vary geographically and over time. Each county’s score is derived from the /api/counties/{fips_code}/mobility-score endpoint.
- Heat Map Visualization
Displays a color-coded map of Metro Atlanta counties (from GeoJSON data).
Each polygon represents a county, shaded based on its EM score — lower values use cooler colors (e.g., blue) and higher scores use warmer colors (e.g., red/orange gradient).
Users can hover to view a tooltip showing:
County name
FIPS code
Current EM score (rounded to 3 decimals)
Clicking a county opens a detailed information panel (see section 3).
The map dynamically updates whenever the user changes the selected year.
- Year Toggle (Dynamic Filtering)
A dropdown or slider allows users to select a year (e.g., 2016–2024).
Changing the year triggers a re-fetch for all counties via:
/api/counties/{fips_code}/mobility-score?year={selectedYear}
The map re-renders with new EM scores and updated color gradients.
Transition animations smoothly adjust the colors when data updates.
A small loading spinner or shimmer effect appears while fetching.
- County Details Panel (Expanded View)
When a county is clicked, a detail panel or modal slides in with deeper insights:
Basic Info
County Name
FIPS Code
Selected Year and Month (if applicable)
EM Score (e.g., 0.8123)
Cached Status (for debugging data origin)
Advanced Metrics
Historical Trend Line: A small sparkline showing the EM score over previous years for that county.
Year-over-Year Change:
Numeric difference (e.g., +0.045)
Percent change (e.g., +5.9%)
Visual indicator (green upward arrow for improvement, red downward arrow for decline).
Peer Comparison:
Ranks the county among the 29 counties (e.g., “5th highest EM score in Metro Atlanta”).
Socioeconomic Indicators (if available):
Median wage
Employment growth rate
Education attainment index
Industry diversity score
Data Sources: API references or source labels such as BLS or Census datasets.
Overview
The CareerRise Mobility Dashboard visualizes economic opportunity and workforce data across the 29-county Metro Atlanta region. It integrates mobility scores, unemployment trends, and career demand insights to help users understand where opportunity is growing and what careers are driving mobility.
The data is powered by the backend endpoint:
GET /api/counties/{fips_code}/mobility-score?year={selectedYear}
and future companion APIs such as /api/unemployment and /api/careers.
- Interactive Heat Map
Displays the 29 Metro Atlanta counties via GeoJSON overlay.
Each county is color-coded by its Economic Mobility (EM) Score, fetched dynamically from the API.
Hover → shows county name + EM score tooltip.
Click → opens full detail panel with metrics and graphs.
Year toggle dynamically updates the map using the selected year’s API data.
Smooth transitions and gradient interpolation between score ranges.
- Year Toggle
Dropdown or slider control for selecting year (2016–2025).
On change, refetches EM scores for all counties and updates the map.
Supports debounce logic to prevent excessive API calls.
Provides visual feedback (loading shimmer or spinner).
- County Details Panel
When a county is selected, a detail panel slides in showing in-depth analytics:
Basic Info
County Name, FIPS Code
EM Score (e.g., 0.8123)
Selected Year (and Month if present)
Cached status (backend debug indicator)
Mobility Metrics
Trend Line Chart: Shows EM score changes over multiple years.
Year-over-Year Change:
Numeric (+0.032) and % (+4.1%) difference
Directional arrow indicators (green ↑ for improvement, red ↓ for decline).
Peer Ranking: e.g., “Ranked 5th in mobility among 29 Metro Atlanta counties.”
- 📊 Unemployment Rate Graph (2021–2025)
A key section below the mobility metrics visualizes the county-level unemployment rate trend:
Line Chart (X-axis: Years 2021–2025, Y-axis: Unemployment Rate %)
Each year’s data point fetched from an API (e.g., /api/unemployment/{fips_code}?start=2021&end=2025).
Tooltip on hover shows exact rate and year (e.g., 2023: 3.9%).
Line color dynamically adapts to theme (green for low unemployment, orange/red for rising unemployment).
Optional shaded region shows Metro Atlanta average as a comparative band.
Responsive layout — fits cleanly below EM score trends.
Purpose: lets users correlate mobility improvement with employment stability at the county level.
- 💼 Top 5 Careers in Demand (by County)
This section highlights the top five most in-demand careers that drive upward mobility in the selected county.
Each career card includes:
Career Title (e.g., Software Developer, Registered Nurse, Electrician, Data Analyst, Truck Driver)
Median Wage Range
Projected Growth (%)
Job Openings (current year)
Education Level Required
BLS Occupation Link
Visual Representation
The top 5 careers appear as green cards or bars — representing high-demand and growth-driving opportunities.
Example: 💚 Software Developer — +14% growth — $72,000 median wage
Beneath them, blue cards or zones represent Areas of Career Focus, indicating clusters of opportunity or skill-building areas.
Example: 💙 Skilled Trades Cluster (Construction, HVAC, Electrical, Manufacturing)
Hovering over a card expands a mini modal with detailed stats and a link to the Bureau of Labor Statistics outlook page.
The data is sourced from /api/careers/{fips_code} or a pre-seeded high_demand_careers.json dataset.
Purpose
This section helps users understand what’s driving economic mobility — connecting EM scores to tangible workforce trends.
- 📬 Email Subscription Feature
“Subscribe for Updates” button near the dashboard footer or sidebar.
When clicked, prompts the user to enter an email.
Subscriptions are used to:
Notify users when new EM data or unemployment metrics are released.
Send periodic insights or workforce trend summaries.
Validates email format before sending to backend (e.g., POST /api/subscribe).
Confirmation toast or success banner appears after successful submission.
- 🌗 Light/Dark Theme Toggle
Top-right theme switch (sun/moon icon).
Light mode: white background, soft neutral tones.
Dark mode: charcoal base, vivid county outlines and glowing heatmap accents.
Charts and tooltips adjust dynamically for accessibility.
User preference stored locally for persistence across sessions.
- 🧩 Supporting UI Elements
Legend Bar: Gradient color bar for EM score range (0.0 → 1.0).
Search Bar: Quick search by county name or FIPS code.
Zoom/Pan Controls: Map interactivity for closer inspection.
Play Animation: Auto-cycles through years to show how mobility evolves visually.
Data Source Labels: Footer or tooltip note: “Source: CareerRise Data Portal, BLS, U.S. Census.”
- 🧠 User Flow
User loads the dashboard → sees heatmap of all counties.
Selects a year → map updates EM scores and unemployment graph.
Clicks a county → detailed sidebar opens with EM score, unemployment rate trend, and top 5 career data.
Optionally subscribes to updates or switches between light/dark mode.
The code ("Code") in this repository was created solely by the student teams during a coding competition hosted by JPMorgan Chase Bank, N.A. ("JPMC"). JPMC did not create or contribute to the development of the Code. This Code is provided AS IS and JPMC makes no warranty of any kind, express or implied, as to the Code, including but not limited to, merchantability, satisfactory quality, non-infringement, title or fitness for a particular purpose or use.