https://github.com/leabrodyheine/california-schools-data-visualization
This front-end project provides interactive visualizations of learning models adopted by California schools during the pandemic. Using D3.js and Mapbox, it dynamically presents data through bar charts, bubble charts, heatmaps, and geographic maps, allowing users to explore trends across school types, sizes, and districts.
https://github.com/leabrodyheine/california-schools-data-visualization
d3-visualization d3js data-analysis data-visualization mapbox openai plotly
Last synced: 3 months ago
JSON representation
This front-end project provides interactive visualizations of learning models adopted by California schools during the pandemic. Using D3.js and Mapbox, it dynamically presents data through bar charts, bubble charts, heatmaps, and geographic maps, allowing users to explore trends across school types, sizes, and districts.
- Host: GitHub
- URL: https://github.com/leabrodyheine/california-schools-data-visualization
- Owner: leabrodyheine
- Created: 2024-05-19T03:37:58.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-19T03:46:36.000Z (about 2 years ago)
- Last Synced: 2025-07-04T10:44:01.161Z (about 1 year ago)
- Topics: d3-visualization, d3js, data-analysis, data-visualization, mapbox, openai, plotly
- Language: JavaScript
- Homepage:
- Size: 30.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# California-Schools-Data-Visualization
## Project Overview
This project provides a comprehensive visualization of learning models adopted by schools in California during a specific period. Utilizing datasets that include enrollment numbers, learning models, and school types, it generates interactive visualizations including a timeline chart, bar chart, bubble chart, heatmap, and geographic map representation. The goal is to explore how different learning models were distributed across school types, sizes, and districts during the pandemic.
## Features
- **Dynamic Data Loading**: Asynchronously loads and cleans data from a specified CSV file.
- **Interactive Visualizations**: Includes multiple D3.js and Mapbox based visualizations that dynamically update based on user-selected filters.
- **User Interaction**: Allows users to filter visualizations based on time periods, school types, learning models, enrollment sizes, and districts.
## Setup
To run this project locally, follow these steps:
1. Use the Chrome web browser.
2. Unzip the provided data file `California_Schools_LearningModelData_Final.zip` into the project directory.
3. Open `index.html` in a live preview to interact with the webpage.
## Dependencies
- D3.js (v7)
- Mapbox GL JS (v2.3.1)
- Plotly.js (Latest)
## Project Structure
- **index.html**: The entry point of the project, containing the layout and references to JavaScript and CSS files.
- **styleSheet.css**: Contains styles for the webpage.
- **main.js**: Initializes the visualizations and sets up event listeners for interactive elements.
- **dataLoader.js**: Asynchronously loads and processes the CSV data file.
- **visualizations**:
- **barChart.js**: Generates the bar chart visualization.
- **bubbleChart.js**: Generates the bubble chart visualization.
- **heatMap.js**: Generates the heatmap visualization.
- **mapVisualization.js**: Generates the geographic map visualization.
- **timeLineChart.js**: Generates the timeline chart visualization.
## Video Walkthrough
A zip file (`CS5044_P2_Video.mov.zip`) is provided that contains a video walkthrough of the dashboard. Unzip this file and watch the video to understand how to navigate and interact with the visualizations.
## Data Source
The data used in this project is stored in `California_Schools_LearningModelData_Final.csv`. It includes details on school types, enrollment numbers, and learning models adopted by schools across various districts in California.
**Note**: The data file is provided in a zip format due to its size. Please unzip the file into the project directory to run the dashboard.
## Running the Project
To run the project, unzip the data file, open `index.html` in your Chrome browser, and interact with the visualizations.