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:

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 div1, div2, div3, and div4. Within each div, you should append an SVG element with the id previously used for each plot (chart1, chart2, chart3, and scatterplot2)

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:

  1. A README.md file
  2. A index.html file
  3. An a03.js file
  4. All other Javascript files necessary to run the code (including ukDriverFatalities.js, calvinScores.js, and d3.js plus any others you require)
  5. 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

Matching the original visual style10
Correct utilization of d3's data join10

 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.

Note that while axes were eligible for extra credit in A02, you do not need to recreate these for your recreation of Visualization 2. Just porting your code from A02 to this assignment will not be eligible for extra credit. We will see a more direct way of implementing axes in A04 using d3 scales.