Assignment 04
D3
Due: Sep. 21, 2021 09:29:59 AM
Graded: Sep. 27, 2021
Percentage of Grade: 5%
Assignment Description: Finalized
In this assignment, you will use d3.js to recreate plots that we generated using SVG elements in class and in the last assignment.
Please click here to create your repository
Objectives
This assignment is designed to practice using d3.js as well as to help reinforce the fundamental paradigms that d3.js uses. Specific objectives include:
- Practicing the use of d3.js for plotting
- Experimenting with the data binding paradigm of d3 through the use of the general update pattern
- Using these tools to generate simple visualizations of data
Description
Your task for this assignment is to generate your first visualizations in d3. Specifically, you will recreate:
- The 3 examples developed in L04’s iteration_8.js
- Visualization 2 from A03
I have provided a starter repo that includes .js
files for the two different datasets as well as d3.js
which includes the d3 library. In addition, I’ve provided an HTML file index.html
which provides a skeleton for how you will display the plots. Each visualization should be an SVG element of the same dimensions used previously. The id
attributes of the four divs
in this HTML file are vis1
, vis2
, vis3
, and vis4
. Within each div, you should append an SVG element with the id previously used for each plot (chart_1
, chart_2
, chart_3
, and scatterplot_2
)
Your visualizations must be created using d3 calls. In other words, the way to turn data into SVG elements has to be through d3 methods like selectAll()
, data()
, enter()
, and append()
.
For this assignment, you are allowed to use any additional library you’d like. You are required to use d3 for the basic plotting, but maybe you’ll also want to use jQuery, underscore.js, or another helper library to augment the visualization. If you choose to do this, remember to give proper attribution in your README.md and source code.
Submission
You should use git to submit all source code files. The expectation is that your code will be graded by cloning your repo and then executing it within a modern browser (Chrome, Firefox, etc.)
Please provide a README.md
file that provides a text description of how to run your program and any parameters that you used. Also document any idiosyncrasies, behaviors, or bugs of note that you want us to be aware of.
To summarize, my expectation is that your repo will contain:
- A
README.md
file - A
index.html
file - An
a04.js
file - All other Javascript files necessary to run the code (including
ukDriverFatalities.js
,calvinScores.js
, andd3.js
plus any others you require) - Any
.css
files containing style information
Grading
Deductions
Reason | Value |
Bugs or syntax errors | -10 each bug at grader's discretion to fix |
Point Breakdown of Features
Requirement | Value | ||||
Consistent modular coding style | 5 | ||||
External documentation (README.md) following the template provided in the base repository | 5 | ||||
Header documentation, Internal documentation (Block for functions and Inline descriptive comments). Wherever applicable / for all files | 10 | ||||
Visualization: Each chart
| 20x4 = 80 | ||||
Total | 100 |
Cumulative Relationship to Final Grade
Worth 5% of your final grade
Extra Credit
Implementing features above and beyond the specification may result in extra credit, please document these in your README.md.