Skip to content

Latest commit

 

History

History
63 lines (38 loc) · 4.11 KB

README.md

File metadata and controls

63 lines (38 loc) · 4.11 KB

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

Data Citations

Submission

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