Website Title - Visualize : https://supriya0115.github.io/Web_Visualization/
Technology - Bootstrap, CSS[WebVisualization.css], HTML, minimal scripting
The following html pages make the web visualization dashboard :
-
The Landing Page (index.html)-
-
The navigation bar / header at the top has the project name "Visualize" at the left. This appears on 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 wiith 4 Visualizations, Compare, Get Data.
-
The center is a container with text and the images that are expandable/collapsible.
-
There is a footer with Twitter link to my homepage and glyphicon to navigate to the top.
-
-
Visualization( with 4 separate links) Visualization1.html, Visualization2.html , Visualization3.html, Visualization4.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.
-
-
"Compare" - Compare.html displays the images used in the dashboard. The images and headers are clickable, and redirects to individual summary pages.
-
"Get Data" - GetData.html displays the underlying data for some of the illustrations. While there are sophisticated ways to the csv data import to HTML table, for this effort I used a resource available on the internet to translate the data to HTML code and used it to formulate the table.
-
The focus of the effort was to layout a website that utilizes Bootstrap, HTML elements and tags, and visualization(images) .The text / summary definitely needs more work to align the context and visualization.