In this assignment, you will use d3.js to recreate plots that we generated using SVG elements in class and in the last assignment.
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 a data
Your task for this assignment is to generate your first visualizations in d3. Specifically, you will recreate:
I have provided a starter repo that includes
.js files for the two different datasets as well as
d3.v5.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
vis4. Within each div, you should append an SVG element with the id previously used for each plot (
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
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.
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:
d3.v5.jsplus any others you require)
.cssfiles containing style information
|Bugs or syntax errors||-10 each bug at grader's discretion to fix|
Point Breakdown of Features
|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|
Cumulative Relationship to Final Grade
Worth 5% of your final grade
Implementing features above and beyond the specification may result in extra credit, please document these in your README.md.