We started with the idea of building a website to help people determine which of America’s national parks to visit. We wanted to show activities, distances, states, directions, and weather. This project aims to create a valuable resource for individuals interested in exploring and learning about the diverse national parks across the United States.
- Resources
- Cleaned - CSVs of final cleaned data.
- Data Sources - JSONs of final cleaned data. These are being hosted on a separate GitHub repo (Activities and Parks List).
- Uncleaned - CSVs of data pulled from the NPS API.
- NPS_API_Data_Pull - Code used to pull the data from the NPS API.
- WEBSITE - HTML, JS, and CSS source documentation for our website.
- Project Rubric - Text file containing the standards for our assignment.
- Data Transformation Jupyter Notebook - main code used for initial data cleaning.
- MongoApp - PyMongo Jupyter Notebook used to provide information on loading cleaned CSVs into MongoDB and JSONifying them.
- Assets - Images belonging to the repo.
- Below is a representation of our DTL process
- We pulled 5 CSVs from the National Park Services API:
- Activities
- Fees and Passes
- Park Activities
- Parks List
- Visitors' Centers
- After some deliberation as a team and diving into each spreadsheet, we decided to keep only the Activities database and to merge the Fees/Passes and Parks List datasets.
- Once data cleaning was complete, the data was loaded into MongoDB and JSONified via PyMongo. We chose MongoDB due to the ease with which it can be integrated into Python/Jupyter Notebooks using PyMongo. The JSON files were hosted on separate Github repos to allow easy access to the data for website construction.
Note! If you are attempting this project yourself given the data here, the two code lines you need to upload the cleaned CSVs are mongoimport --type csv -d national_parks -c parks_list --drop --headerline --file parks_list_cleaned.csv, and mongoimport --type csv -d national_parks -c activities --drop --headerline --file activities.csv.
- Below is a representation of our process for filtering data and how our website logic might look.
- Below is the actual representation of our filtering process
- Once data was JSONified wireframes were created to contain the main navigation wiring, content containers, map containers, headers and footers. A main page was created as well as a main CSS for implementing color, styling and event specific handling, such as mozilla neglect. Once the main page was created other pages were created and modified to fit the page requirements. Images were created and added at this point. Once the page was built, functionality was added to populate the dropdowns, return map logic, reset the page and navigate away from the page. Other functionality was built such as background_logic.js and popup_logic.js to handle non-page specific requirements.
- ROOT>
- index.html - Main landing page
- park.html - Park name search
- activity.html - Activity search
- State.html - State search
- directions.html - Directions to park
- Images Folder
- Folder with images for the entire site
- Static Folder
- CSS Folder
- Index.css - CSS styles for the index page
- parkstyles.css - CSS styles for the parks page
- activitystyles.css - CSS styles for the activities page
- statestyles.css - CSS styles for the states page
- direction_styles.css - CSS styles for the directions page
- JS Folder
- MAIN LOGIC FOR PAGE FUNCTIONALITY
- background_logic.js - Script that rotates the background of all the pages
- popup_logic.js - Script that handles the popup for the about portion of the page
- view_logic.js - Script that handles the carousel for the index page
- park_logic.js - Script that handles the dropdown, filtering and map for the park page
- park_reset_logic.js - Script that resets the parks page back to initializaiton state
- activity_logic.js - Script that handles the dropdown, filtering and map for the activity page
- activity_reset_logic.js - Script that resets the activity page back to initializaiton state
- state_logic.js - Script that handles the dropdown, filtering and map for the state page
- state_reset_logic.js - Script that resets the state page back to initializaiton state
- directions_logic.js - Script that handles the map for the directions page
- directions_reset.js - Script that resets the activity page back to initializaiton state only clears icons as the app is in dev and layers are buggy
- MAIN LOGIC FOR PAGE FUNCTIONALITY
- CSS Folder
- This page is the main index of the site. The page is set up to loop through a carousel so you can pick how you want to search for the park. Additional functionality includes linking to the National Park Service through the logo and hypertext in the main navigation. The "Home", "About", and "Explore" offer links directly through this site. The home button directs you back to the index page, the about page presents a popup that talks about the project team, and the explore takes you to the directions page.
- This page uses the dropdown to search alphabetically for a park.
- Once you have located a park, additional information is available in the popup. A shortened description turns into a full description when you click "read more", and the carats expand to go straight to the park website, look at the park activities, and use google maps to get directions to the park.
- This page uses the dropdown to search for an activity and return a list of parks that off the activity.
- This page uses the dropdown to search a state and return a list of parks that are in that state. One note is that markers outside the state are trails that travel through the state, however the marker is showing you the main visitors center for the trail.
- This page uses the map to search the listed parks. To use the directions, click open the popup for the park and click the bottom hyperlink. From there you can add your starting address above the populated container. The search button will return one or more options for driving directions to the park from your loaded destination.
- To use the directions, click open the popup for the park and click the bottom hyperlink. From there you can add your starting address above the populated container. The search button will return one or more options for driving directions to the park from your loaded destination.
- National Park Service API
- Database system (MongoDB) for data storage
- Frontend development with HTML, CSS, and JavaScript.
- Mapping libraries for map visualization and geospatial tools for distance calculations.
- ChatGPT