Two example web applications for exploring and analyzing Inter-American Tropical Tuna Commission (IATTC) public domain fisheries data in the Eastern Pacific Ocean.
The IATTC Data Explorer provides a data crawler and 2 specialized visualization tools for analyzing Public Domain Data provided by IATTC:
- 🐟 Tuna Catch Data Explorer - Comprehensive analysis of catch data by fishing nation and gear type
- 🗺️ Purse Seine Geo Explorer - Interactive spatial mapping of purse seine fishing activities
- @ Python Data Crawler - A python tool that can function as a service that checks IATTC Public Domain Data for updates, downloads data sets and converts them to JSON format to be used by the web apps.
Analysis of catch data by flag and gear type (2013-2023).
Key Features:
- Species Breakdown: Yellowfin, Skipjack, Bigeye, Albacore, and Pacific Bluefin tuna
- Fleet Analysis: Compare catches by fishing nation/flag
- Gear Comparison: Purse Seine, Longline, Harpoon, and other fishing methods
- Temporal Trends: Multi-year trend analysis with interactive charts
- Data Table: Searchable, sortable records with detailed information
Interactive spatial mapping of Purse-seine fishery data.
Key Features:
- Interactive Maps: Click grid cells for detailed catch information
- Set Type Analysis: Dolphin-associated, No-association, and Floating object sets
- Heat Maps: Visualize catch intensity and fishing effort patterns
- Seasonal Patterns: Monthly and seasonal fishing activity analysis
- CPUE Analysis: Catch per unit effort calculations and visualization
Visit the Live Demo to start exploring immediately.
# Clone the repository
git clone https://github.com/alexperex/IATTC-sample.git
cd IATTC-sample
# Start a local web server
python -m http.server 8000
# Open your browser to http://localhost:8000Download the Project
git clone https://github.com/alexperex/IATTC-sample.git cd IATTC-sampleAdd Your Data Files
Follow the instructions of the script to grab your updated datasets. More info...
Start Local Server
# Choose one option: python -m http.server 8000 # Python
Open in Browser Navigate to
http://localhost:8000
IATTC-sample/
├── index.html # Landing page hub
├── styles.css # Landing page styles
├── script.js # Landing page interactions
├── catch-by-flag-data/ # Catch data application
│ ├── index.html
│ ├── styles.css
│ ├── data/CatchByFlagGear2013-2023.json
│ └── js/
│ ├── app.js
│ ├── config.js
│ ├── dataService.js
│ ├── chartRenderer.js
│ ├── filterManager.js
│ └── tableManager.js
└── geo-ps-data/ # Geospatial application
├── index.html
├── styles.css
├── data/PublicPSTunaSetType2013-2023.json
└── js/
├── app.js
├── config.js
├── dataService.js
├── mapService.js
├── chartService.js
├── filterManager.js
└── tableManager.js
Inter-American Tropical Tuna Commission (IATTC)
- Website: www.iattc.org
- Catch by Flag and Gear: Total catch by fishing nation and gear type
- Purse Seine Set Types: Spatial data with fishing method details
The applications expect JSON files with specific structures.
- Data Layer: DataService handles loading, filtering, and processing
- Visualization Layer: Chart.js for statistical charts, OpenLayers for maps
- UI Layer: FilterManager and TableManager for user interactions
- Controller: Main App class orchestrates all services
- Frontend: HTML5, CSS3, Vanilla JavaScript (ES6+)
- Dataset: Python, JSON
- Charts: Chart.js 3.9.1 for statistical visualizations
- Maps: OpenLayers 8.2.0 for interactive mapping
This project is open source and available under the MIT License.
Alejandro Perez
- 🌐 Website: alexperez.me
- 🐙 GitHub: @halprez
- Built with: Visual Studio Code
- Development Time: 8h
- Languages: HTML, CSS, JavaScript, Python