The data set included with the assignment is based on 2014 ACS 1-year estimates: https://factfinder.census.gov/faces/nav/jsf/pages/searchresults.xhtml, but you are free to investigate a different data set. The current data set incldes data on rates of income, obesity, poverty, etc. by state. MOE stands for "margin of error."
Homework Requirements/Deliverables
| Step | √ | Requirement |
Step
√
Requirement
01
√
Create a new repository for this project called D3-challenge.
02
√
create a directory for the D3 challenge. Use the folder name to correspond to the challenge: D3_data_journalism.
Development Requirements: "create a scatter plot between two of the data variables"
Step
√
Requirement
01
√
In app.js, create a scatter plot that represents each state with circle elements.
02
√
pull in the data from data.csv by using the d3.csv function
03
√
- Include state abbreviations in the circles.
04
√
- Create and situate your axes and labels to the left and bottom of the chart.
05
√
- use python -m http.server to run the visualization.
06
√
- test in your browser with http://localhost:8000
Bonus: Impress the Boss
Step
√
Requirement
01
√
include more demographics and more risk factors
02
√
Place additional labels in your scatter plot and give them click events
03
√
Animate the transitions for your circles' locations as well as the range of your axes.
04
√
Do this for two risk factors for each axis. Or, for an extreme challenge, create three for each axis.
05
√
Hint: Try binding all of the CSV data to your circles. This will let you easily determine their x or y values when you click the labels.
06
√
Add tooltips to your circles and display each tooltip with the data that the user has selected
07
√
Use the d3-tip.js plugin developed by Justin Palmer — we've already included this plugin in your assignment directory.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent