Create a website to visually compare data from a CSV file. The CSV file has been provided by the end user. The original CSV file (cities.csv) can be found in the Resoruces folder.
The website must consist of the following:
- 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.
- The data must come from exporting the
.csvfile as HTML, or converting it to HTML.
- 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.
- Provides two more text links: "Comparisons," which links to the comparisons page, and "Data," which links to the data page.
- A breakdown of the individual charts would be nice, but is not required.
- Is responsive.
- The images can be found here: assets folder.
- Bootstrap is required.
- Deploy the website to GitHub pages, with the website working on a live, publicly accessible URL as a result.
- Use a CSS media query for the navigation menu.
- Feel free to take some liberty in the visual aspects, but keep the core functionality the same.
- Add extra visualizations! The more comparisons the better.
- Use meaningful glyphicons next to links in the header.
- Have visualization navigation on every visualizations page with an active state.
This section contains screenshots from the end user as to the minimum expectations followed by a screenshot of the final product. This is meant to be an interactive experience, so the screenshots only show a limited view of the final product.
| Sample Landing Page | Final Landing Page |
|---|---|
 |
 |
| Sample Comparison Page | Final Comparison Page |
|---|---|
 |
 |
| Sample Data Page | Final Data Page |
|---|---|
 |
 |
| Sample Visualization Page | Final Visualization Page |
|---|---|
 |
 |
| Sample Navigation Menu | Final Navigation Menu |
|---|---|
 |
 |