Community Context
Key Features
Real-Time Census Integration
Access live demographic data directly from official U.S. Census sources at no cost to your community.
High-Performance Mapping
Experience rapid load times and fluid navigation powered by the lightweight Leaflet library.
Dynamic Layer Toggles
Overlay multiple datasets and switch them on or off instantly to discover hidden community patterns.
One-Click Profile
Generate a demographic profile and compare local results against county, state, and national averages with one tap.
Tract-Level Visualization
View professional color-coded graphics at the census tract level with built-in legends for instant clarity.
Intuitive Data Pop-ups
Click any map feature to trigger a clear, high-readability summary of neighborhood statistics.
Why did I build this?
"For most planners, visualizing Census data on a desktop is easy—but sharing it with the public in a meaningful way is not. Too often, we rely on static, downloaded datasets that are outdated the moment they are published. I built Community Context to prove that we can do better. By using the live Census API and the open-source Leaflet library, I’ve created a way to give this free public data back to the communities we serve in the most accessible, real-time format possible."
Community Context
Tech Notes
Implementation Resources
-
Platform: Wix
-
Live Demo: https://www.planning.community/communitycontextdemo
-
Core Components: Leaflet Map, Chart.js. Wix Velo code, Census API, GeoJSON
-
Source Code (GitHub):
Community Context Architecture
Goal: To transform raw 2022 American Community Survey (ACS) data into a high-speed, interactive comparison tool using lightweight web libraries.
-
Global Header. Height: 70px. Provides consistent branding without crowding the workspace.
-
Map Section. Height: Calc(100vh - 70px). 70px)Maximizes visual data area by filling the remaining viewport.
-
Map Iframe. Scale: Stretch. Ensures the Leaflet map expands to the full browser width.
Module 1: Interactive Geospatial Mapping
Technology: Custom HTML/JS Injection (Leaflet Library) This module builds a high-resolution choropleth map of Monongalia County, WV, by merging Census data with geographic block group boundaries.
-
Data Visualization: Automatically calculates quartiles to color-code block groups based on population density, median income, minority share, and active transportation rates.
-
Layer Management: Includes a custom toggle to switch between demographic and transit layers instantly.
-
Wix Integration: When an area is clicked, a popup displays local stats and triggers a "View Profile" event. This sends the specific Geographic ID (GEOID) to the parent Wix site to update the dashboard.
Module 2: Dynamic Comparative Charting
This module creates a side-by-side demographic profile that benchmarks a specific neighborhood against broader geographic trends.
-
Four-Level Comparison: Visualizes data for the Census Block Group, Monongalia County, West Virginia, and the United States.
-
Dual-Axis Rendering: Uses a sophisticated Chart.js layout to display two distinct data types simultaneously:
-
Axis A (Percentage): Minority population, poverty rate, and walk/bike commuting shares.
-
Axis B (Currency): Median household income.
-
-
Automated Data Fetching: Upon receiving a GEOID from the map, the code fetches 2022 ACS data in real-time, ensuring the comparison is always current and location-specific.
The Data Handshake: Post-Message Logic
The interaction between the interactive map and the dashboard is managed via a post-message communication protocol. When a user clicks the "View Profile" button inside a map popup, the HTML component (Leaflet) sends a data packet containing the specific Geographic ID (GEOID) to the parent Wix site. The Velo page code acts as a listener, catching this unique identifier and instantly triggering two parallel actions: it passes the new GEOID to the Chart.js module to refresh the demographic benchmarks and simultaneously opens the Community Profile popup. This "handshake" ensures the transition from geographic browsing to detailed data analysis is seamless, responsive, and requires no page reload.