- This is the personal project for unit 12(Web) of Data Visualization and Analytics(graded A).
- Bulit a dashboard to visualize the lattitude dependence of the global weather. The dataset and figs are fed from another project(i.e., homework project for unit 06(Python-APIs)), in which the weather for more than 500 randomly chosen cities were collected from the openweathermap API for current date. For more details, see here.
- A snapshot of the app:
- The web-link for the app of this project is here.
- Main tools used in this project: html, css, Bootstrap.
- Clone this repo as well as the repo for Python-APIs. Use the main.ipynb of the second repo to generate a new list of cities and collect new png figures for the current weather data. Feed those figures into ./Resources folder of the current project. Then, you can open the index.html and play with the dashboard. You might get different observations from mine described in the following.
- From the weather data for 538 cities collectd today(11/07/2018), we conclude that temperature is peaked around 80 Fahrenheit near the equator from -20 to 30 degrees of Latitude. It continually drops to 30 Fahrenheit(even lower for several cities) in the region of 40 to 80 degree of latitude.
- There is no obvious dependence of cloudiness on latitude. Yet somehow there are several cloudiness values, 0, 20, 40, 78,97, are most crowded with citis all over the world, much more than other values.
- The humidity percentage has only weak dependence on the latitude. It takes smallest value around -20(Southern Hemisphere) and 20 latitude(Northern Hemisphere).
- There is no obvious dependence of wind speed on latitude. The wind speed in general is from 0 mph to 15 mph.
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.
The website must consist of 7 pages total, including:
- A landing page containing:
- An explanation of the project.
- Links to each visualizations page.
- 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. You may use a csv-to-html table conversion tool, e.g. ConvertCSV.
- 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 on the right of the navbar named "Plots" which provides links to each individual visualization page.
- Provides two more 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.
- 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.
- Use a different dataset! The requirements above still hold, but make it your own.
- Use a bootstrap theme to customize your website. You may use a tool like Bootswatch. Make it look snazzy, give it some attitude. If using this, be sure you also meet all of the requirements listed above.
- Add extra visualizations! The more comparisons the better, right?
- Use meaningful glyphicons next to links in the header.
- Have visualization navigation on every visualizations page with an active state. See the screenshots below.
This section contains screenshots of each page that must be built, at varying screen widths. These are a guide; you can meet the requirements without having the pages look exactly like the below images.
Large screen:
Small screen:

Large screen:
Small screen:
Large screen:
Small screen:
You'll build four of these, one for each visualization. Here's an example of one:
Large screen:
Small screen:
Large screen:
Small screen:
