Salmon Habitat Restoration Projects Visualization

Introduction

This document provides detailed insights into the structure, functionality, and usage of the JavaScript files comprising the Salmon Habitat Restoration Projects Visualization. Leveraging Leaflet for mapping, AmCharts for chart visualization, and DataTable for managing tabular data, this project offers a comprehensive platform for exploring salmon habitat restoration initiatives.

File Overview

HTML and CSS Files

public/restoration/restoration.html

This HTML file serves as the project's main entry point, incorporating essential libraries and scripts for rendering functionalities.

public/restoration/restoration_themed.html

This HTML file serves as the project's main entry point, similar to restoration.html, but it is themed with GC Web. It incorporates essential libraries and scripts for rendering functionalities while adhering to the styling and design guidelines provided by GC Web.

public/restoration/styles.css

The CSS file contains minimal styles tailored not to interfere with existing web page styles. This approach ensures compatibility and seamless integration when placed into a placeholder within an existing web page. The design focuses on basic layout and functionality, avoiding any style overrides that could conflict with the GC Web styles.

Project Scripts

public/restoration/global.js

The global.js file contains essential global variables and configurations required for initializing and managing the habitat restoration data visualization project.

Variables	Purpose
dataset	Object defining the structure and configuration for the salmon habitat restoration project dataset.
selectors	Configures dropdown selectors for filtering habitat restoration projects based on various criteria.
geojsonLayers geojsonSMULayers	Defines GeoJSON layers for displaying habitat restoration project boundaries on the map.

public/restoration/utils.js

Repository for commonly used utility functions facilitating data processing and manipulation throughout the project.

public/restoration/getdata.js

Functions responsible for fetching and processing data required for project visualization.

public/restoration/chart.js

Functions for creating and managing chart visualizations within the project.

public/restoration/map.js

Functions for initializing and managing interactive map visualization.

public/restoration/datatable.js

Functions for initializing and managing data tables within the project.

public/restoration/restoration.js

Main script orchestrating the project logic, integrating functionalities from other JavaScript files.

public/restoration/indexedDB.js

Module for managing data storage and retrieval using IndexedDB, providing data handling for the project.

Data Folder

The data files are placed under public/restoration/data/. If you do not find this folder, please create it and download all necessary CSV and JSON files to place into the folder.

CSV data File

• Folder: Pacific Salmon Strategy Initiative - 04 - Salmon Habitat Restoration Projects - All Documents (sharepoint.com)
• File: Salmon_Habitat_Restoration_Projects_Final.csv
• Schema: The CSV file schema maps dataset columns to descriptive aliases used throughout the project.

GeoJSON Files

• Folder: Pacific Salmon Strategy Initiative - GeoJSON_CU_SMU_TestingOnly_20240605 - All Documents (sharepoint.com)
• Files: There are 14 GeoJSON layers, 7 CU layers, and 7 SMU layers.
  • CU Layers:
    • CK_CU_Simp100.geojson
    • CM_CU_Simp100.geojson
    • ...
  • SMU Layers:
    • CK_SMU_Simp100.geojson
    • CM_SMU_Simp100.geojson
    • ...

These files are integral to the project and are referenced as the major values for the variables geojsonLayers and geojsonSMULayers in the global.js file.

Usage Guide

Backend Environment

• The project is designed to run on Node.js version 20.
• It utilizes Express.js for backend routing.

GitHub Repository

The complete source code for this project is available on GitHub, repo name is data-portal-habitat-restoration: dfo-mpo/data-portal-habitat-restoration

ref/ Folder

• The ref/ folder in the repository contains files for the GitHub-hosted static website (legacy) used only for reference. It is not required to run the main application and serves purely for demonstration purposes.

Initial Setup

1. Ensure that all necessary files, including HTML, CSS, data files, and JavaScript files, are properly linked and accessible within the project environment.
2. To install node modules, run npm install.
3. To launch the project, run the command node app.js in the terminal.
4. To preview in Azure Web App, Salmon Habitat Restoration Projects

Reference Implementation with GC Web Theme

For a reference implementation on how the visualization should look when integrated into a styled web page, refer to the following page: Salmon Habitat Restoration Projects with GC Web Theme.

Exploring Data

Upon loading the dashboard, you will be presented with various interactive components, including:

• A map displaying salmon habitat restoration project boundaries.
• Charts showcasing key project metrics.
• Data tables providing information on salmon habitat restoration projects.