/D3-Data-Journalism-and-Visualization

Using JavaScript and D3 to create a visualization on BioDiversity

Primary LanguageJavaScript

D3 Homework - Data Journalism and D3

Purpose

Key Skills

  • JavaScript
  • D3.js
  • D3.js interactive visualization
  • tooltips

Step 1 - Create a Skeleton

  • Before attempting to plot, I first load in the csv and did a console.log to make sure I correctly loaded the csv Note: You'll need to use python -m http.server to run the visualization. This will host the page at localhost:8000 in your web browser.
  • Next, I made sure that my margins were appropriate so that I can properly do a scatterplot
  • This assignment had two parts - main assignment and bonus assignment. I first did the main assignment to make sure that I could get the most basic scatter plot.

Step 2 - Plot basic scatterplot

  • The main assigment required to create a scatter plot between two of the data variables such as Healthcare vs. Poverty or Smokers vs. Age.
  • Once the scatter plot was created, I added a state abbreviations to each circle.
 var circleText = chartGroup.selectAll()
    .data(data)
    .enter()
    .append("text")
    .text(d => d.abbr)
    .attr("x", d => xLinearScale(d[xProperty])) 
    .attr("y", d => yLinearScale(d[yProperty])) 
    .attr("class", "stateText") 
    .attr("font-size", "9");

Step 3 - Bonus

  • The bonus portion required additional variables and tooltip with interactions.