hw-03 - Interactive Webpage
Link to GitHub Pages: [insert your clickable hyperlink here]
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]. -
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 two buttons.
- One button should say "Reveal Marks and Channels". When a user clicks "Reveal Marks and Channels", text should be added to the page 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).
- The other button should say "Reveal Colormap(s)". When a user clicks "Reveal Colormap(s)", text should be added to the page 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).
- 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