Data is more powerful when we share it with others! Let's take what we've learned about HTML and CSS to create a dashboard showing off the analysis we've done.
For this homework we'll be creating a visualization dashboard website using visualizations we've created in a past assignment. Specifically, we'll be plotting weather data.
In building this dashboard, we'll create 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. We'll 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.
For reference, see the "Screenshots" section below.
- A landing page: (Seen above! ❤️)
- 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: (Also displayed above! Each graph is a clickable link!)
- 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:
- A "Data" page:
- Displays a responsive table containing the data used in the visualizations.
The website must, at the top of every page, have 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 "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). The nav must have similar behavior as the screenshots "Navigation Menu" section (notice the background color change).
Finally, the website must be deployed to GitHub pages.
When finished, submit to BootcampSpot the links to 1) the deployed app and 2) the GitHub repository.
Ensure your repository has regular commits and a thorough README.md file
- You may use the weather data or choose another dataset. Alternatively, you may use the included cities dataset and pull the images from the assets folder.
- You must use Bootstrap. This includes using the Bootstrap
navbarcomponent for the header on every page, the bootstrap table component for the data page, and the Bootstrap grid for responsiveness on the comparison page. - You must deploy your website to GitHub pages, with the website working on a live, publicly accessible URL as a result.
- Be sure to use a CSS media query for the navigation menu.
- Be sure your website works at all window widths/sizes.
- Feel free to take some liberty in the visual aspects, but keep the core functionality the same.
Unit 11 Rubric - Web Design Homework - Web Visualization Dashboard
OpenWeatherMap.org. (2012). Сurrent weather and forecast. Retrieved from https://openweathermap.org/