Skip to content

WeatherPy Part 2, Latitude: An Online Visualization Dashboard for WeatherPY - Web-Design-Challenge

Notifications You must be signed in to change notification settings

rarconaut/Web-Design-Challenge

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 

Repository files navigation

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.

image

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.

image

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