Real-time salmon harvest data visualization and historical analysis for the Bristol Bay sockeye salmon fishery.
Bristol Predict is a comprehensive web application designed for commercial fishermen and data enthusiasts to explore Bristol Bay's sockeye salmon fishery data. The platform provides interactive maps, real-time catch visualization, historical trend analysis, and comparative benchmarking tools to help users understand the complex dynamics of the fishery.
Interactive Map - Click on districts to explore historical and current catch data from Naknek-Kvichak, Egegik, Ugashik, Nushagak, and Togiak regions
Multi-District Charts - Line and bar charts displaying daily catch trends across all districts for selected dates or date ranges
Pie Chart Distribution - Visual breakdown of catch by district to identify which zones are performing on any given date
Historical Trends - Visualize sockeye per delivery metrics across seasons and years to understand long-term patterns and seasonal variations
Catch Efficiency Analyzer - Enter your delivery data and benchmark your catch performance against district averages
Weather Dashboard - Live NOAA weather data, tidal predictions, wind and wave maps from Windy.com, and temperature forecasts
More Salmon Harvest Data - State-wide and region-specific data visualization with interactive Tableau dashboards for comprehensive analysis
Complete Historical Context - Access to three seasons of backfilled data (2023-2025) with long-term pattern analysis
Real-time Data Integration - Automatically pulls the latest data from Alaska Department of Fish and Game (ADF&G) daily
Benchmark Your Performance - Compare your catch data against district averages to understand your position in the fishery
Frontend
- React with Vite for fast development and optimized production builds
- Leaflet for interactive mapping functionality
- Recharts for data visualization and charting
- Tailwind CSS for responsive UI styling
- Lucide React for consistent icon system
Backend
- Node.js with Express for API server
- SQLite for data persistence
- Axios for HTTP requests
- CORS enabled for secure cross-origin requests
Data Visualization
- Tableau Public for advanced dashboard analytics
- GeoJSON for geographic data layers
Deployment & Infrastructure
- Vite build tooling for optimized production bundles
- Responsive design for desktop and mobile devices
-
Clone the repository
git clone <repository-url> cd bristol-predict -
Install dependencies
npm install -
Create a
.envfile in the root directory (if needed for API keys or configuration) -
Start the development server
npm run dev
The application will be available at http://localhost:5173
bristol-predict/
├── src/
│ ├── components/
│ │ ├── BristolBayMap.jsx - Main interactive map for Bristol Bay
│ │ ├── SoutheastMap.jsx - Southeast Alaska region visualization
│ │ ├── CatchEfficiencyScreen.jsx - Catch benchmarking tool
│ │ ├── RunTimingTracker.jsx - Run timing visualization
│ │ ├── EnvironmentalDashboard.jsx - Weather and environmental data
│ │ ├── ToolsHub.jsx - Navigation hub for all tools
│ │ ├── SplashScreen.jsx - Initial landing screen
│ │ └── HtmlOverlay.jsx - HTML content overlay
│ ├── styles/
│ │ ├── BristolBayMap.css
│ │ ├── SoutheastMap.css
│ │ └── [other component styles]
│ ├── App.jsx - Main application component
│ └── App.css
├── public/
│ ├── geojson/ - Geographic data files
│ └── images/
├── backend/ - Node.js/Express server
├── index.html
├── vite.config.js
└── tailwind.config.js
Alaska Department of Fish and Game (ADF&G) - Official fishery management data and daily catch reports
Port Moller Test Fishery - Indicator data for seasonal patterns
NOAA - Weather and marine condition data
Windy.com - Wind and wave forecasting
-
Launch the application and navigate through the splash screen to access the tools hub
-
Select from available visualization tools:
- Bristol Bay Map - Explore district-level data
- Southeast Alaska Map - View state-wide and regional data
- Catch Efficiency Analyzer - Input your catch data for comparison
- Run Timing Tracker - Monitor species timing patterns
- Environmental Dashboard - Check weather and environmental conditions
-
Interactive map features:
- Click on districts to zoom and view detailed data
- Use zoom controls to adjust map view
- Hover over regions for quick data previews
-
Data filtering and analysis:
- Select date ranges to view historical data
- Use comparative tools to benchmark your performance
- Export or share findings as needed
To make changes to the project:
-
Install dependencies:
npm install -
Start development server:
npm run dev -
Edit components in
src/components/and styles insrc/styles/ -
Changes will hot-reload in the browser
-
Build for production:
npm run build
The application follows a cohesive design system inspired by Bristol Bay's ocean environment:
Color Palette:
- Midnight Blue (#0a1428) - Primary background
- Deep Ocean (#0f2a48) - Secondary backgrounds
- Accent Blue Bright (#3b9ff3) - Interactive elements and highlights
- Sunset Gold (#f4a460) - Warm accents
- Sunset Coral (#ff6b6b) - Alerts and emphasis
Typography:
- Crimson Text (serif) - Headers and titles
- Inter (sans-serif) - Body text and UI elements
The interface features subtle animated gradients and a professional aesthetic designed for both functionality and visual appeal.
Completed
- Phase 1: Basic map visualization
- Phase 2: Data scraping and integration
- Phase 3: Time-series visualization
- Phase 4: Multi-tool dashboard system
In Progress
- Enhanced data filtering and aggregation
- Advanced analytics features
Planned
- Machine learning predictions
- Production deployment and optimization
- Mobile app development
Bristol Predict is built with care for the Bristol Bay fishing community. See LICENSE file for details.
For questions, issues, or feature requests, please reach out through the appropriate channels or submit an issue in the project repository.
Built with React, Vite, Leaflet, Recharts, Node.js, Express, and SQLite. Designed and developed with a deep respect for Bristol Bay and its fishing heritage.