hw-04

hw-04 - Event Handling

Link to GitHub Pages: [https://ds4200-s23-class.github.io/hw-04-john-nick/]

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.

Purpose

The purpose of this assignment is to practice creating interactive visualizations.

Instructions

1. Resources to support this assignment are provided in the Resources section below.

2. You can find a reference for what your final webpage should look like in the "reference" folder of your cloned directory.

3. Create a GitHub Page for your repo and add the link to your GitHub Page above where you see [insert your clickable hyperlink here].

4. 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-04".
   • Add a centered header: "hw-04: Event Handling".
   • Create two columns on your webpage. The left should take up 60% of the page and the right should take up 40%.
   • In the left column, use SVG's to create a scatter plot with the following points: (1, 2), (2, 4), (6, 2), (9, 9). You should include axes, and your points should be plotted proportionally to distances on your axes, but you do not need to add axis labels or titles.
   • Your visualization should include the following interactive features:
     • If the user hovers over a point, that point should highlight.
     • If the user clicks on a point, that point should be given a border, and the point's coordinates should show in the right column of the webpage.
     • If the user clicks on a point that already has a border, the point's border should disappear.
   • In the right column of your webpage, allow the user to input coordinates for a new point they want to add to the visualization. You may restrict inputs to integers between 1 and 9 so that you do not need to change your visualization scale from earlier. You can be creative in how you solicit points from the user, but if you need an idea for how to start, try emulating the reference solution. Once the user submits their coordiantes, add the appropriate point to your visualization. This point should have all the same event handling capabilities as your existing points.
   • 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.

Resources

• 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.)

• HTML Graphics - SVG's

• Advanced SVG's

• HTML Tags

• Flexbox

• SVG

• [Inputs] (https://www.w3schools.com/js/js_input_examples.asp)

Data Citations

• Visualizations: https://fivethirtyeight.com/features/the-52-best-and-weirdest-charts-we-made-in-2016/

Submission

• Be sure to push all changes to your repo and follow all instructions above.
• Submit your assignment on Gradescope