Assignment: Create a Scatter Plot
In this assignment, you'll create a Scatter Plot of a dataset of your choice and post it on bl.ocks.org.
Please watch this video to get a sense of how D3 can be used. Skip to 33:01 if you already understand SVG, HTML, CSS and JavaScript basics.
References from the video:
This video uses version 3 of D3, but the examples linked below use version 4.
The D3 CHANGES document contains all differences between these versions, and is useful to consult.
Please watch Unit 1 of the D3.js in Motion, which builds up a scatter plot using D3 version 4.
You are welcome to fork (using Blockbuilder) any of these scatter plot examples as a starting point for this assignment:
- Scatter Plot with Axis Labels (simplest, showing two quantitative attributes)
- Scatter Plot with Time Axis (useful if you want to show a time/date quantitative attribute)
- Scatter Plot with Ordinal Axis (useful if you want to show an ordinal attribute)
- Stylized Scatter Plot with Color Legend (for showing two quantitative attributes and one categorical)
- Standalone Scatter Plot (the one from the video, uses D3 version 3)
You may also choose to make it from scratch, or fork from any other scatter plot examples on bl.ocks.org. Be sure to tweak things so the scatter plot makes sense with your data and looks decent (e.g. margins, circle size, circle opacity, labels, tick marks).
The data may be any data you choose. For example, the data could be:
- One of the datasets from your "Find 3 Datasets" assignment
- The same data you used for last week's Bar Chart assignment
- A dataset from one of the current events visualizations shared with the class
When you're done, please:
- Review the grading criteria in detail and double check that you have everything.
- Submit the link to your work on bl.ocks.org as the submission for this assignment (URL should contain "bl.ocks.org", not "blockbuilder.org").
- You are welcome to also post the link in the course Slack to share your work with other students
- Also post in the #examples channel of the global D3 slack if you think it turned out to be really cool.
Good luck!
Clarifications:
- The three datasets should ideally be totally unrelated, totally separate.
- Each dataset should be in its own separate bl.ock, and 3 separate URLs should be submitted.
- If you are getting errors, please post to Slack and ask for help. Usually the errors are solvable. Common errors are related to text formatting (e.g. an extra comma in CSV, a missing quote in JSON).
- Missing data values are tricky to deal with, and handling missing data is a whole topic on its own. If your data has missing values, you can:
- Omit rows or columns with missing data
- Treat missing values as another value to be visualized
- Fill in zeros for missing values (but be careful - often this doesn't make sense to do)
- Find another dataset that doesn't have missing values