Gone-Fishin Live Website Vesion

Description

This app features the ability to dynamically create a bar graph that shows a fish's calories and the health of a species population by the bar color. An example of a graph can be viewed by clicking on the Fish Graph button.

The maximum fish you can add to a graph for desktop,tablet,mobile is 20,10, and 3 respectively.

Sample of Desktop Image

Instructions

1. To create a graph you need to add a fish. You can find a fish by scrolling through the fish tiles or narrow it down with the search bar

2. Next click on the image, which will take you to a details page for that fish

3. Click the "Add Fish to Graph" button

4. From the same position you can deselect a fish from appearing on the graph by clicking on the remove fish from graph button

5. To reset the graph you can reload the page

Library

• D3.js

API

• API www.fishwatch.gov

Technical Implementation details

Search would filter dynamically by getting the user's input and then using the showFishMatch function.

let allFish = []
const searchInput = document.getElementById("search")
searchInput.addEventListener("input", e => {
    const value = e.target.value.toLowerCase()
    showFishMatch(allFish, value)
    })

The showFishMatch function grabs all of the fish from the API and then iterates through each one to toggle a class for that fish to be invisible/visible depending on the user value typed.

function showFishMatch(fishes, value) {
    const fishEle = document.querySelectorAll("[data-id]")
    fishEle.forEach(ele => {
        let index = ele.dataset.id
        const isVisible = fishes[index].name.toLowerCase().includes(value)
        ele.classList.toggle("hide", !isVisible)
    })
}

Future Features

• Ability to save graphs
• Filter fish based on population, calories, alphabetically
• Graph more datapoints (mercury level, yearly population health, season)
• Ability to print different graph styles