A8—D3 linking

Due F 2022-04-08, 11:59pm EST 16pts

Follow the instructions below and submit a single PDF for the assignment.

Please post any questions about this assignment on Canvas in Discussion: A8—D3 linking.

Warning: This is an individual assignment.

Table of contents

• Change log
• Aim of the assignment
• Instructions
  • Repo setup
  • Copy over code from A7
  • Running your code
  • Repo organization
  • Implement linking on two visualizations
  • GitHub Pages, hyperlinks, & validation
• Submission instructions
• Academic integrity
• Grading rubric
• Tips, tricks, & troubleshooting

Change log

• Updated correct due date day of week. A student got a bug bounty! +2 pts

Aim of the assignment

This assignment will help you get started with linking. When combined with brushing (from the previous assignment), the brushing and linking interaction idiom is quite powerful for exploring the connections between related datasets. Interactivity techniques like this are important for your final project. You will not have to create any new chart—you will just extend your previous work from A7—D3 brushing to integrate linking.

Instructions

Please look through all the materials below so you understand the setup instructions; how to run, organize, and submit your code; and our requirements for the assignment.

Repo setup

1. Accept the GitHub Classroom assignment invitation by clicking this link to get your repository:

   https://classroom.github.com/a/KoHqptG-

   For reference, this is the template repository your repository is being created from: https://github.com/NEU-DS-4200-S22/A8--D3_Linking.

   Recall our general instructions and policies on GitHub Classroom assignments.

2. Clone your GitHub-Classroom-generated repository to your local machine.

   E.g., in your terminal / command prompt CD to where you want this the folder for this activity to be. Then run: git clone <YOUR_REPO_URL>

   Warning: Under no circumstances should you be editing files via the GitHub website user interface. Do all your edits locally after cloning the repository.

3. CD or open a terminal / command prompt window into the cloned folder.

Copy over code from A7

This assignment will build on what you completed already in A7—D3 brushing.

1. Copy your code, i.e., the files and folders from the previous assignments (apart from .github, LICENSE and README.md.)

2. After following the steps below to run your code, you should see the same brushing interaction you already implemented on the two visualizations.

Running your code

1. start a simple python webserver. E.g., python -m http.server, python3 -m http.server, or py -m http.server. If you are using python 2 you will need to use python -m SimpleHTTPServer instead, but please switch to python 3 as Python 2 was sunset on 2020-01-01.

2. Wait for the output: Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/).

3. Now open your web browser (Firefox or Chrome) and navigate to the URL: http://localhost:8000.

Repo organization

Your repository should be organized just as it was in A7—D3 brushing.

Implement linking on two visualizations

In linking, the same brush effect (pop-out, highlighting) is applied to marks in other visualizations that correspond to the same datums. If you drag a brush across the marks in one visualization, this causes marks in the other view to be highlighed too. We already implemented brushing in the previous assignment. In this assignment, we will add linking.

1. Create a linking interaction for each visualization to the other when the user drags a rectangle across either of them. Each of the marks within the rectangle should be selected and highlighted in the other plot. i.e., if you drag a rectangle across the line cart, the enclosed marks in it and the corresponding marks in scatterplot will be highlighted. Note that this will require you to clear the brush in the other visualization. This GIF illustrates what this interaction should look like:

   

   Note: It is ok if your brushing rectangle stays on the screen after use instead of disappearing.

   Some implementation notes:

   • You should use d3-dispatch to implement the linking.

   • Keep the code modular. The line chart internals doesn’t need to know anything about the scatterplot internals. Implement the necessary functions in each chart to deal with sharing selections. E.g.,

       // Gets or sets the dispatcher we use for selection events
       chart.selectionDispatcher = function (_) {...}
     

       // Given selected data from another visualization 
       // select the relevant elements here (linking)
       chart.updateSelection = function (selectedData) {...}
     

     Likewise, in visualization.js, you should create a shared instance of d3-dispatch that you give to both charts.

GitHub Pages, hyperlinks, & validation

1. Commit and push your files to GitHub and test whether your website looks the same on GitHub pages. Note: the GitHub Pages site won’t show up until you make your first commit & push to the remote repository, and it may take up to a minute for it to finish deploying. You would normally need to turn on GitHub pages in the settings for your repository, but we have set that up for you so you’re using the gh-pages branch by default.

2. Edit the last line of your README.md file to include a clickable hyperlink to the GitHub page website for your repo., replacing the <insert your clickable hyperlink here> code with your markdown.

Warning: It is not the same as it was for A7!

1. In index.html update the GitHub repo URL with the URL of your repository. It is in the span with id='forkongithub'.

Warning: It is not the same as it was for A7!

1. Make any edits necessary to ensure your code passes the W3 validator. You can see the results automatically from the ‘Validate HTML, CSS, and Links’ checks we run when you push to GitHub. I.e., you want to see a green check next to your commit () and not a red X (). You can also see the results in the Actions tab of your repo:

   

Submission instructions

1. Commit all your local files and push them to the remote repository on GitHub which was generated by GitHub Classroom. We will grade based on what is visible on the GitHub Page.

2. Submit the URL of your repository to the assignment A8—D3 linking in GradeScope.

   Warning: Do not put a link to a personal repository. It must be within our class GitHub organization.

Academic integrity

You are welcome to use D3 tutorials or resources as a starting point for your code. However, keep our academic integrity policy in mind.

Warning: You must cite and reference the resources or sample code you use and explain how you use them and where (e.g. “js/main.js line 33”).

Warning: Cite everything, including code from the D3.js Graph Gallery, bl.ocks.org, Observable, or Stack Overflow!

Failure to properly cite and attribute code is a breach of academic honesty. Simply copying existing examples without performing thoughtful edits is a breach of academic honesty. Also, per our syllabus, homework is an individual assessment and should be completed by you alone. You are welcome to ask fellow classmates and students for help and discuss the assignment, but the submission should be your own work.

See the academic integrity policy on the syllabus for more detail on our expectations.

Grading rubric

Tips, tricks, & troubleshooting

If you run into trouble, first look at our relevant tutorials which have links to various resources, tips, & tricks:

• GitHub Classroom
• git
• Web Development
• D3