/Web-Visiulization

For this task I be created a visualization dashboard website using visualizations we've created in a past assignment. Specifically, I plotted weather data.

Primary LanguageHTML

image

Before You Begin

  1. Create a new repository for this project called Web-Design-Challenge. Do not add this homework to an existing repository.

  2. Clone the new repository to your computer.

  3. Inside your local git repository, add your html files, as well as your assets, Resources and visualizations folders. Your index.html should be the landing page that the user first sees.

  4. Push the above changes to GitHub or GitLab.

  5. Deploy to GitHub Pages.

Latitude - Latitude Analysis Dashboard with Attitude

For this task I be created a visualization dashboard website using visualizations we've created in a past assignment. Specifically, I plotted weather data.

In building this dashboard, I created individual pages for each plot and a means by which we can navigate between them. These pages will contain the visualizations and their corresponding explanations. I also have a landing page, a page where we can see a comparison of all of the plots, and another page where we can view the data used to build them.

Website Requirements

For reference, see the "Screenshots" section below.

The website consist of 7 pages total, including:

  • A landing page containing:
    • An explanation of the project.
    • Links to each visualizations page. There should be a sidebar containing preview images of each plot, and clicking an image should take the user to that visualization.
  • Four visualization 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 "Comparisons" page that:
    • Contains all of the visualizations on the same page so we can easily visually compare them.
    • Uses a Bootstrap grid for the visualizations.
      • The grid must be two visualizations across on screens medium and larger, and 1 across on extra-small and small screens.
  • A "Data" page that:
    • Displays a responsive table containing the data used in the visualizations.
      • The table must be a bootstrap table component. Hint
      • The data must come from exporting the .csv file as HTML, or converting it to HTML. Try using a tool you already know, pandas. Pandas has a nifty method approprately called to_html that allows you to generate a HTML table from a pandas dataframe. See the documentation here