Health Data by State: Multi-axis D3 Visualization

Posted on by millerbrook

Github Repository

Github Pages Site

This project utilizes D3 to visualize U.S. state-based health data across a total of six axes (3 for each axis in the coordinate plan). In total, it offers 9 visualizations of the correlations between various health-related metrics.

Bubbles representing individual U.S. states shift to show relationships between 2 groups of variables.

Pull in the data from data.csv by using the d3.csv function.

// Retrieve data from the CSV file and execute everything below
d3.csv("assets/data/data.csv")
  .then(function (demoData, err) {
    if (err) throw err;
    // parse data
    var abbrev = [];
    demoData.forEach(function (data) {
      data.healthcare = 100 - data.healthcare;
      data.smokes = +data.smokes;
      data.obesity = +data.obesity;
      data.poverty = +data.poverty;
      data.age = +data.age;
      data.income = +data.income;
      abbrev.push(data.abbr);
    });

Create graph with multiple axes.

// Function used for updating xAxis var upon click on axis label
function renderXAxis(newXScale, xAxis) {
  var bottomAxis = d3.axisBottom(newXScale);

  xAxis.transition().duration(1000).call(bottomAxis);

  return xAxis;
}

// Function used for updating yAxis var upon click on axis label
function renderYAxis(newYScale, yAxis) {
  var leftAxis = d3.axisLeft(newYScale);

  yAxis.transition().duration(1000).call(leftAxis);

  return yAxis;
}

Provide some exploratory analysis of the graph.