Welcome to the newsroom! I've just accepted a data visualization position for a major metro paper. I am tasked with analyzing the current trends shaping people's lives, as well as creating charts, graphs, and interactive elements to help readers understand your findings.
The editor wants to run a series of feature stories about the health risks facing particular demographics. She's counting on me to sniff out the first story idea by sifting through information from the U.S. Census Bureau and the Behavioral Risk Factor Surveillance System.
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, The current data set includes data on rates of income, obesity, poverty, etc. by state. MOE stands for "margin of error."
-
Used
D3-Library -
html and Javascript
-
Inside your local git repository
-
Use the
d3-tip.jsplugin developed by Justin Palmer—we've already included this plugin in your assignment directory.
CHALLENGE COMPLETED!!
-
You need to create a scatter plot between two of the data variables such as
Healthcare vs. PovertyorSmokers vs. Age. -
Using the D3 techniques create a scatter plot that represents each state with circle elements. I code this graphic in the
app.jsfile, which have the Basic Chart coding. Pull in the data fromdata.csvby using thed3.csvfunction. -
Included state abbreviations in the circles.
-
Create and situate your axes and labels to the left and bottom of the chart.
-
Used
python -m http.serverto run the visualization. This hosted the page atlocalhost:8000in my web browser. -
Used David Gotz's example to see how to implement tooltips with d3-tip.
Why making a static graphic when D3 lets you interact with my data?
CHALLENGE COMPLETED!!
- Included more demographics and more risk factors.
- Placed additional labels in my scatter plot and give them click events so that your users can decide which data to display. Animated the transitions for your circles' locations as well as the range of your axes.
- Complete the extreme challenge and create three for each axis!!!
CHALLENGE COMPLETED!!
- Binded all of the CSV data to my circles. This determine the x or y values when I click the labels.
CHALLENGE COMPLETED!!
-
Added data layers for letting the ticks on the axes allow us to infer approximate values for each circle.
-
Used tooltips in my D3 graphics to reveal a specific element's data when user hovers their cursor over the element. Added tooltips to my circles and displayed each tooltip with the data that the user has selected.
-
Completed my analysis with detailed explanations about the data behaviour
CHALLENGE COMPLETED!!
Evaluation parameter metrics:
-
Complete all steps in the core assignment
-
Challenge myself with the Bonus task!
-
Coherency of scatter plot (labels, ticks)
-
Visual attraction
-
Professionalism
-
Create a new repository on GitHub called
D3-Challenge
GREAT CHALLENGE!