Homework Requirements/Deliverables
| Step | √ | Requirement |
| Step | √ | Requirement |
|---|---|---|
| 01 | √ | Website has 7 pages |
| 02 | √ | website must be deployed to GitHub pages. |
| 03 | √ | Every page has nav menu - Has the name of the site on the left of the nav which allows users to return to the landing page from any page. |
| 04 | √ | Every page has nav menu - Contains a dropdown on the right of the navbar named "Plots" which provides links to each individual visualization page. |
| 05 | √ | Every page has nav menu - Provides two more links on the right: "Comparisons" which links to the comparisons page, and "Data" which links to the data page. |
| 06 | √ | Every page has nav menu - Is responsive using media queries. |
| 07 | √ | Every page has nav menu - The nav must have similar behavior as the screenshots "Navigation Menu" section (notice the background color change) |
| 08 | √ | Page 1: landing page containing An explanation of the project |
| 09 | √ | Page 1: landing page has links to each visualizations page |
| 10 | √ | Page 2-5 visualization pages - each has a descriptive title and heading tag |
| 11 | √ | Page 2-5 visualization pages - The plot/visualization itself for the selected comparison |
| 13 | √ | Page 2-5 visualization pages - A paragraph describing the plot and its significance |
| 14 | √ | "Comparisons" page that Contains all of the visualizations on the same page so we can easily visually compare them. |
| 15 | √ | "Comparisons" page - Uses a bootstrap grid for the visualizations |
| 16 | √ | "Comparisons" page - The grid must be two visualizations across on screens medium and larger, and 1 across on extra-small and small screens. |
| 17 | √ | "Data" page that displays a responsive table containing the data used in the visualizations. |
| 18 | √ | "Data" page - The table must be a bootstrap table component. |
| 19 | √ | "Data" page - The data must come from exporting the .csv file as HTML, or converting it to HTML. Use pd.called to_html tto generate a HTML table from a pandas dataframe |
Development Requirements
| Step | √ | Requirement |
|---|---|---|
| 01 | √ | 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 |
| 02 | √ | You must use bootstrap, including navbar on every page, tables, and responsive grids |
| 03 | √ | You must produce a live, publicly accessible URL as a result. |
| 04 | √ | use a CSS media query for the navigation menu |
| 05 | √ | website works at all window widths/sizes. |
| 06 | √ | Feel free to take some liberty in the visual aspects, but keep the core functionality the same. |
From the grading rubric pdf:
| Step | √ | Requirement |
|---|---|---|
| 01 | √ | Landing page - All Images load |
| 02 | √ | Landing page - Images link to correct page |
| 03 | √ | Landing page - Bootstrap grid used correctly to separate sections |
| 04 | √ | Landing page - Page is responsive when window is shrunk. |
| 05 | √ | Landing page - Includes a couple paragraphs of an overview for this project |
| 06 | √ | Visualization pages - All Images load |
| 07 | √ | Visualization pages - Images link to their respectivepages |
| 08 | √ | Visualization pages - Includes a paragraph of textdescribing the plot |
| 09 | √ | Visualization pages - Uses bootstrap grid toseparate sections |
| 10 | √ | Visualization pages - Page is responsive when window is shrunk |
| 11 | √ | Visualization pages - Current visualization in visualization section has a border |
| 13 | √ | Comparison page - All Images load |
| 14 | √ | Comparison page - All labels are correct |
| 15 | √ | Comparison page - Images are responsive (2x2 on large screens and 4x1 on small screens) |
| 16 | √ | Comparison page - All Images link to their respective visualization page |
| 17 | √ | Data page - No rows missing from data |
| 18 | √ | Data page - Table uses bootstrap table class(es) |
| 19 | √ | Data page - Table is responsive and stays inside container when page is shrunk |
| 20 | √ | Data page - Table has all 10 columns |
| 21 | √ | Nav bar - All links work and direct to the correct page |
| 22 | √ | Nav bar - Navbar has a working dropdown with links to plot pages |
| 23 | √ | Nav bar - Navbar is on every page |
| 24 | √ | Nav bar - Navbar collapses when window is shrunk and button works to make nav reappear |
| 25 | √ | Nav bar - Uses bootstrap navbar class |
Bonus = no grading component (don't do it)
| Step | √ | Requirement |
|---|---|---|
| 01 | Use a different dataset! The requirements above still hold, but make it your own. | |
| 02 | Use a bootstrap theme to customize your website. You may use a tool like Bootswatch. Make it look snazzy, give it some attitude. | |
| 03 | Add extra visualizations! The more comparisons the better, right? | |
| 04 | Use meaningful glyphicons next to links in the header. | |
| 05 | ave visualization navigation on every visualizations page with an active state. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent