hw-03 - Interactive Webpage
(GitHub Pages)[https://ds4200-s23-class.github.io/hw-03-hw-03-jj-and-jaclyn/]
Clone this repo and work locally. Be sure to push the final version of your code (and any significant updates along the way) before submitting.
The purpose of this assignment is to practice creating an interactive webpage, as well as decomposing a visualization into marks and channels.
-
Resources to support this assignment are provided in the Resources section below.
-
You can find a reference for what your final webpage should look like in the "reference" folder of your cloned directory.
-
Create a GitHub Page for your repo and add the link to your GitHub Page above where you see insert your clickable hyperlink here (leave the '[' and ']').
-
Using the index.html file included in your repo, an external stylesheet (no styling should be done inline; it should all be done via external css), and an external javascript file (no javascript code should be included in your html file; it should all be done via external js) please do the following:
- Make all font on your webpage Arial.
- Add a title: "hw-03".
- Add a centered header: "hw-03: Interactive Webpage, and Marks & Channels".
- Divive your webpage into two columns.
- In the left column, add each visualization image included in the img folder of your cloned repo. The images should be stacked vertically (one on top of the other) as opposed to side-by-side.
- For each visualization, in the right column add the following:
- Text that lists the marks and channels shown in the visualization to the left. For each channel, note the type of attribute it represents and whether the mapping from that type of attribute to the channel is a good choice or a poor choice. Explain your answer. Use formatting to make your answers easily readable (see reference for an example).
- Text that lists the colormaps used in the visualization to the left. For each colormap, note the type of attribute it represents and whether the mapping from that type of attribute to the colormap is a good choice or a poor choice. Explain your answer. Use formatting to make your answers easily readable (see reference for an example).
- Find some data of interest to you. Create a visualization showing something interesting in the dataset. You can use whatever tool you want to create the visualization. The visualization should use color as a channel. Take a screenshot of your visualization and add it to your webpage in the left column. In the right column, answer the same questions you answered for the included images, but for your visualization.
- Add a centered header to the bottom of your page. The header should say "Acknowledgements" in font smaller than the font used for your first header. Under this header, add a div. Inside of this div add a bulleted list of the resources you used to complete this assignment.
-
HTML Page on w3schools. (On the left-hand side of the page there is a menu bar with links to various topics.)
-
CSS Page on w3schools. (On the left-hand side of the page there is a menu bar with links to various topics.)
-
DOM. Focus on what the DOM is, and ignore how to manipulate it with JavaScript for now (we will look at this later).
-
HTML Basics. (On the left-hand side of the page there is a menu bar with links to various topics.)
- Visualizations: https://fivethirtyeight.com/features/the-52-best-and-weirdest-charts-we-made-in-2016/
- Be sure to push all changes to your repo and follow all instructions above.
- Submit your assignment on Gradescope