WeatherPy Part 2 - Web-Design-Challenge
NOTE: This is Part 2 of WeatherPy, a global weather analysis and visualization project. Part 1 can be found in my "python-api-challenge" GitHub repository. This repository contains the html and css scripts for the Latitude Dashboard website.
Latitude - A Weather Analysis Dashboard With Attitude!
Latitude is a website using the visualizations created in WeatherPy Part 1 - Python-API-Challenge to create a visualization dashboard. Specifically, this dashboard contains individual pages for each plot generated by the WeatherPy Weather Analysis, and a means for navigating between them. In addiion to the visualizations, these pages also contain their corresponding explanations.
The Latitude Dashboard website consist of 7 pages total, including: A landing page containing:
- An explanation of the project.
- Links to each visualizations page with a sidebar containing preview images of each plot. Clicking an image takes the user to that visualization.
Four visualization pages, each with:
- A descriptive title and heading tag.
- The plot/visualization for the selected comparison.
- And a paragraph describing the plot and its significance.
A "Comparisons" page that:
- Contains all of the visualizations on the same page for easy visual comparison.
- Uses a Bootstrap grid for the visualizations.
- The grid reformats the visualizations for various screen sizes, from extra-small to large screens.
A "Data" page that:
- Displays a responsive bootstrap table component containing the data used in the visualizations.
- The data was exported as HTML from the original .csv file using Pandas.
At the top of every page, the website has a navigation menu that:
- Has the name of the site on the left of the navbar which allows users to return to the landing page from any page.
- Contains a dropdown menu on the right of the navbar named "Plots" that provides a link to each individual visualization page.
- Provides two more text links on the right: "Comparisons," which links to the comparisons page, and "Data," which links to the data page.
- Is responsive (using media queries).
Finally, the website is deployed to GitHub pages! Explore the dashboard here: https://rarconaut.github.io/WebVisualizations/Dashboard
2020-21 Data Science & Visualization Bootcamp - Rawaf Homework 11 Web Design Challenge