Environmental Trends Tracker (ETT)

An interactive web application for visualizing and exploring environmental data related to coastal habitats and water quality in Massachusetts embayments.

What is ETT?

The Environmental Trends Tracker provides scientists, policymakers, and the public with tools to explore environmental monitoring data through:

• Interactive Maps: Visualize habitat extent (eelgrass, salt marsh, tidal flats, diadromous fish) with historic and current comparisons
• Water Quality Data: Browse 1,000+ monitoring stations with time series data for dissolved oxygen, nitrogen, pH, temperature, and more
• Trend Analysis: Compare habitat changes over time and track progress toward restoration goals
• Data Exploration: Click embayments and stations to view detailed graphs and metrics

Built for Massachusetts coastal ecosystems, ETT aggregates data from multiple monitoring programs into a single, accessible platform.

Quickstart

# Install dependencies
npm install

# Run development server (opens at http://localhost:8080)
npm run serve

# Build for production
npm run build

Note: The application requires ~70MB of environmental data files in public/data/. These files are committed to the repository and include GeoJSON habitat layers and water quality time series data.

How It Works

Architecture

Technology Stack:

• Vue.js 2 + Vuex for reactive state management
• Leaflet for interactive mapping
• Highcharts for data visualization
• Bootstrap Vue for UI components

Application Flow:

1. User navigates to /explorer (main application view)
2. Leaflet map loads with embayment boundaries and monitoring station points
3. User selects habitat type or water quality metric from sidebar
4. Map updates to show relevant layers (current/historic habitat extent or station data)
5. User clicks an embayment or station
6. App fetches corresponding data from public/data/ and renders interactive graphs

Data-Driven Design

All environmental data is loaded at runtime via fetch() calls, not bundled during build:

• Habitat layers: GeoJSON files for eelgrass, salt marsh, tidal flats, and diadromous fish (current and historic extents)
• Water quality data: Individual JSON files for each of 1,044+ monitoring stations with time series data
• Metadata: Habitat goals, legend information, and station locations

This approach allows data updates without rebuilding the application - simply replace files in public/data/ (or dist/data/ after build).

State Management

The Vuex store maintains all application state:

• Selected layers: Which habitat or water quality metric is active
• Selected locations: Which embayment or monitoring station the user clicked
• Layer visibility: Which map layers are toggled on/off
• Graph state: What data to plot and which graphs to show

Components watch the store and react to state changes - no prop drilling or complex event handling.

Key Components

• MapView.vue: Core mapping component managing Leaflet layers and user interactions
• MarginLeft.vue: Left sidebar with habitat/metric selection controls
• MarginRight.vue: Right sidebar displaying graphs and data for selected locations
• Graph components: Specialized Highcharts components for habitat trends and water quality time series

Project Structure

ett/
├── public/
│   └── data/              # Environmental data (GeoJSON, JSON)
├── src/
│   ├── components/        # Vue components
│   │   ├── subs/         # Graph and modal sub-components
│   │   ├── MapView.vue   # Main map component
│   │   ├── MarginLeft.vue
│   │   └── MarginRight.vue
│   ├── lib/
│   │   └── constants.js  # All thresholds, colors, and configurations
│   ├── views/
│   │   ├── IntroView.vue
│   │   └── ExplorerView.vue
│   ├── store.js          # Vuex state management
│   └── router/
└── CLAUDE.md             # Detailed developer documentation

Development

See CLAUDE.md for comprehensive documentation on:

• Vuex store structure
• Component organization
• Data flow patterns
• Constants and configuration
• Implementation guidelines

Deployment

The application is deployed as a static site to AWS S3 and served via CloudFront.

Prerequisites

• AWS CLI installed and configured with appropriate credentials
• Access to the prod-two-massbaysecohealth-org S3 bucket

Deploy to Production

# Build the production bundle
npm run build

# Deploy to S3 (syncs dist/ to bucket root)
aws s3 sync dist/ s3://prod-two-massbaysecohealth-org/ --delete

# Optional: Invalidate CloudFront cache if using CloudFront distribution
# aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*"

The --delete flag removes files from S3 that are no longer in the dist/ folder, keeping the bucket in sync with the build output.

Updating Data Files Only

If you need to update environmental data without rebuilding the application:

# Sync only the data directory
aws s3 sync public/data/ s3://prod-two-massbaysecohealth-org/data/ --delete

# Invalidate data files cache (if using CloudFront)
# aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/data/*"

This is useful when new monitoring data becomes available but the application code hasn't changed.

Deployment Notes

• The production bucket structure mirrors the build output: css/, data/, img/, js/, plus index.html and favicon.ico
• Data files in public/data/ are copied to dist/data/ during build and synced to S3
• The app uses hash-based filenames for JS/CSS bundles, so cache invalidation is only critical for index.html and data files
• Total deployment size is approximately 70MB (mostly environmental data)

License

See license file for details.