Web Design – Web Visualization

Background: Taking what I have learned from HTML and CSS, I created a visualization dashboard website using visualizations I have created from my Python API project on weather data. In building this dashboard, I created the following consisting of a total of 7 pages:

• A Landing Page

  o An Explanation of my project

  o A Link to each visualization page (4 total) with a sidebar containing preview images of each plot which will take you directly to that specific visualization page once clicked

(The HTML for this page can be found here: https://github.com/dschoen24/Web-Design-Challenge/tree/main/WebVisualizations/index.html )

• Four Visualization Pages, each with:

  o A descriptive title and heading tag

  o The Scatter Plot/Visualization itself for the selected comparison

  o A Paragraph describing the scatter plot and its significance

     	Page for Latitude vs. Temperature Scatter Plot
  
     	Page for Latitude vs. Humidity Scatter Plot
  
     	Page for Latitude vs. Cloudiness Scatter Plot
  
     	Page for Latitude vs. Wind Speed Scatter Plot
  

(The HTMLs for these pages can be found here:

https://github.com/dschoen24/Web-Design-Challenge/tree/main/WebVisualizations/temp.html

https://github.com/dschoen24/Web-Design-Challenge/tree/main/WebVisualizations/humidity.html

https://github.com/dschoen24/Web-Design-Challenge/tree/main/WebVisualizations/cloudiness.html

https://github.com/dschoen24/Web-Design-Challenge/tree/main/WebVisualizations/windspeed.html )

• A Comparison Page:

o Contains all the visualizations (scatter plots) on the same page so that we can visually compare them

o A Bootstrap grid was used for this page

(The HTML for this page can be found here: https://github.com/dschoen24/Web-Design-Challenge/tree/main/WebVisualizations/comparison.html )

• A Data Page:

o This page displays a responsive table containing all the data that was used in the visualizations (table is a Bootstrap table component)

o The Data came from exporting a csv file as HTML using Pandas

(The HTML for this page can be found here: https://github.com/dschoen24/Web-Design-Challenge/tree/main/WebVisualizations/data.html )

The CSV file used for this webpage can be found here: https://github.com/dschoen24/Web-Design-Challenge/tree/main/WebVisualizations/Resources/cities.csv )

The actual Visualizations used for this webpage can be found here: https://github.com/dschoen24/Web-Design-Challenge/tree/main/WebVisualizations/Assets )

---

Contact: Debra Potts

Email: dschoenstl24@gmail.com

LinkedIn: www.linkedin.com/in/dschoenpotts