Data is more powerful when we share it with others! HTML and CSS were used to create a dashboard showing off the weather analysis from WeatherPy.

For this challenge a visualization dashboard website was created using visualizations that were created in a past challenge. Specifically, WeatherPy and weather data.

In building this dashboard, pages for visualizations, project summary and project data were created and a means by which we can navigate between them. These pages contain the visualizations and their corresponding explanations.

For reference, see the "Screenshots" section below.

The website consists of the following pages:

• A Landing page containing:
  • An explanation of the project.
  • Links to each visualizations page. Preview images of each plot, and clicking an image takes the user to that visualization.
• Four Visualization Details pages, each with:
  • A descriptive title and heading tag.
  • The plot/visualization itself for the selected comparison.
  • A paragraph describing the plot and its significance.
• A Visualizations Summary page that:
  • Contains all of the visualizations on the same page so we can easily visually compare them.
• A Data page that:
  • Displays a responsive table containing the data used in the visualizations.
    • The table must be a bootstrap table component. Resources
    • The data comes from or converting the csv it to HTML. Pandas has a method approprately called to_html that allows you to generate a HTML table from a pandas dataframe. See the documentation here

The weather dashboard website has, at the top of every page, a navigation menu that:

• Has the name of the site on the left of the nav which allows users to return to the landing page from any page.
• Contains a dropdown menu on the right of the navbar named "Visualizations" that provides a link to each individual visualization page.
• Provides link "Data," which links to the data page.
• Is responsive (using media queries).

This section contains screenshots of each page/section that was built, at varying screen widths.

Large screen:

Small screen:



Large screen:

Small screen:

Large screen:

Small screen:

Large screen:

Small screen:

Large screen:

Small screen: