Climate-Dashboard

How does latitude affect the weather? This project is a Web Visualization Dashboard, which illustrates how temperature, humidity, cloudiness and wind vary depending on latitude. The landing page has a navigation bar with Latitude(reset) button and dropdown menu with Comparison, Data, and Plots (4 Visualizations). 4 miniature images on the right, are clickable and show more details for each visualization, allow to switch between 7 pages. Technologies => Bootstrap, CSS[WebDashStyle.css], HTML, Heroku PHP deployment

#bootstrap#css3#git#heroku-deployment#html5#javascript

View Repository on GitHub ↗

REPOSITORY OVERVIEW

Live repository statistics

★ 1Stars

⑂ 0Forks

◯ 0Open issues

◉ 1Watchers

README preview

Climate-Dashboard

Climate Dashboard

Climate Dashboard Website - Latitude Analysis Dashboard I used slightly customized images, produced by my other Python Project, Weather-Analysis, https://github.com/ibaloyan/Weather-Analysis.

Website Title: Climate-Dashboard

Technology => Bootstrap, CSS[WebDashStyle.css], HTML, Heroku PHP deployment. Web Site: https://climate-dashboard.herokuapp.com/

The following html pages make the web visualization climate dashboard :

The Landing Page (index.html)
- The navigation bar / header at the top has "Latitude" button at the left. This appears on all html pages. When clicked from any page on the website, it redirects back to the home page.
- To the right of the navigation bar are - dropdown with Comparison, Data, and Plots(4 Visualizations).
- The center is a container with text and the images that are expandable/collapsible.
- To the right of Summary Image - Visualization, 4 miniature images, which are clickable and show more details.
"Plots"( with 4 separate links) MaxTemperature.html, Humidity.html , Cloudiness.html, WindSpeed.html:
- Each visualization corresponds to an illustration and its description.
- There is content and images on each page. They have been styled using bootstrap, inline, and external css. Grid/Containers are used to achieve the presentation.
"Comparison" - Comparison.html displays the images used in the dashboard. The images and headers are clickable, and redirects to individual summary pages.
"Data" - Data.html displays the underlying data for some of the illustrations.
The focus of the effort was to layout a website that utilizes Bootstrap, HTML elements and tags, and visualization(images).

ALGORITHMICALLY RELATED

Similar Open-Source Projects

Selected from shared topics, language and repository description—not editorial ratings.

SaloniGupta1201 /

Web-Design-Challenge

★ 0

How does latitude affect the weather? This project is a Web Visualization Dashboard, which illustrates how temperature, humidity, cloudiness and wind vary depending on latitude. The landing page has a navigation bar with Latitude(reset) button and dropdown menu with Comparison, Data, and Plots (4 Visualizations). 4 miniature images on the right. Used HTML, CSS3, and Bootstrap for the front end along with Python Pandas for data engineering.

Active repository

HTMLNo license

⑂ 0 forks◯ 0 issuesUpdated Dec 14, 2020

View details View on GitHub ↗