A4—D3 basic charts

Due F 2022-02-18, 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: A4—D3 basic charts.

Warning: This is an individual assignment.

Change log
Aim of the assignment
Instructions
Submission instructions
Academic integrity
Grading rubric
Tips, tricks, & troubleshooting

Change log

2022-02-18: Added warning that using the DOWNLOAD CODE button on the d3-graph-gallery.com examples gets the d3 v4 code, not d3 v6.
2022-02-17: Added note about link validation failing due to private GitHub repo link. A student got a bug bounty! +2 pts
2022-02-16: Clarified our expectations for the descriptive pose #3. A student got a bug bounty! +1 pts
2022-02-11: The due date was correct on the schedule and here, but wrong on GradeScope and Canvas. A student got a bug bounty! +2 pts

Aim of the assignment

D3 is a valuable JavaScript library you can use to create custom data visualizations or to bind elements of the DOM to data in general. This assignment will help you learn the basics of D3 by creating two standard visualizations from scratch: a bar chart and a line chart.

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 visualization.

Setup

Accept the GitHub Classroom assignment invitation by clicking this link to get your repository:
https://classroom.github.com/a/-vC8XClm
For reference, this is the template repository your repository is being created from: https://github.com/NEU-DS-4200-S22/A4--D3_Basic_Charts.
Recall our general instructions and policies on GitHub Classroom assignments.
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.
CD or open a terminal / command prompt window into the cloned folder.
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.
Wait for the output: Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/).
Now open your web browser (Firefox or Chrome) and navigate to the URL: http://localhost:8000.

Repo organization

Here is an overview of the files and folders we provide for you in your repo.

Root files

README.md is this explanatory file for the repo.
index.html contains the main website content.
style.css contains the CSS.
LICENCE is the source code license for the template. You can add your name or leave it as is.

Folders

Each folder has an explanatory README.md file.

data will hold the data file for the visualization.
favicons contains the favicons for the web page. You don’t need to change anything here.
.github contains GitHub Actions (docs) which will automatically validate your HTML, CSS, and hyperlinks when you push (see the validation last step below). Do not edit files here except to create new .yml files for any additional actions you choose to add (you are not required to make any).
js will contain all JavaScript files you write. E.g.,
- main.js is the js code that you will have to fill in.
lib will contain any JavaScript library you use to ensure long-term survivability. It currently includes D3.
Note: Use the included D3 library here rather than linking to d3js.org or some other content delivery network (CDN). Likewise, put your other libraries here rather than loading them from elsewhere.

Visualization and web page requirements

You must implement the web page following these requirements:

Type: One of the two visualizations you create has to be a grouped bar chart (example), and the other has to be a line chart (example, our in-class example).

Warning: Make sure to click the d3 v6 button on those examples if you’re using that code (and thus also citing the source in the README.md file).

Warning: The DOWNLOAD CODE button on those examples copies the d3 v4 code, NOT the d3 v6 code you want to be working from.

Data: In this assignment we give you the chance to find and select your own data. It can be related to your research, a subject of interest, a hobby, etc.

Note: Please put a copy of the raw data in your repository in the data folder and load it from there.

Color: Both plots must include color as a channel to encode some data. E.g., using d3-scale-chromatic.

Interaction: The expectation is that these plots are static except for the following requirement: at minimum one of your two plots should have a “details on demand” interaction, i.e., mouseover or click on bar/line to retrieve and display value. This can’t be just using console.log—it must be visible as part of the normal page.

Overall excellence: Make sure your plots follow the design guidelines and rules of thumb discussed in the reading as well as lecture.

Code comments: Please make sure to add copious comments to your code to demonstrate your understanding of how your code works. Points will be deducted for few/no comments or uninformative ones.

Descriptive prose: Please include on your web page answers to the following questions for each visualization (a few sentences for each is sufficient):

Explain the dataset you choose to use and why you chose it. Make sure to include a clickable hyperlink to the original data source and include a copy of the data with your submission.
State for each visualization what types of data you used (categorical, ordinal, quantitative).
Justify why your encoding (i.e. bar or line) is appropriate for the type for the data you are visualizing in them. The encodings should make sense and follow the guidelines discussed in the reading as well as lecture.

GitHub Pages, hyperlinks, & validation

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.
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.
In index.html update the GitHub repo URL with the URL of your repository. It is in the span with id='forkongithub'.
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:
Note: Your link validation will fail for the private repository link in the Fork Me on GitHub banner. This is expected and fine.
Commit and push your files to GitHub again.

Submission instructions

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.
Submit a PDF containing the URL of your repository to the assignment A4—D3 basic charts in GradeScope.
Warning: Do not put a link to a personal repository. It must be within our class GitHub organization. Do not submit a link to the GitHub Page.

Please use GradeScope’s “tagging” interface to associate each page of the PDF with the associated questions of the rubric.

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

Criteria	Points
Visualizations	8 pts
Descriptive Text	4 pts
Coding Style	4 pts
	16 pts

Like usual, the visualizations should follow our the best practices and everything you’ve learned in class up to this point. E.g., include axis labels, appropriate scales, titles, legends, annotations, be neat and clean (not cluttered). Points will be deducted for poor quality or confusing visualizations, as well as having inconsistent styles throughout the page.

There must be some descriptive text for each visualization to justify design choices and explain insights. Likewise, points will be deducted for spelling and grammar mistakes.

For the coding style, you should have clear, commented, and validated code. Your web page must load properly and look as expected in the latest Firefox and Chrome browsers. Any code from other sources (modified or copied straight) is clearly acknowledged, including how you use it (note that plagiarism carries severe consequences). Files follow the organizational guidelines from the README.md and original template.

Tips, tricks, & troubleshooting

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