Health Data by State: Multi-axis D3 Visualization

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
  .then(function (demoData, err) {
    if (err) throw err;
    // parse data
    var abbrev = [];
    demoData.forEach(function (data) { = 100 -;
      data.smokes = +data.smokes;
      data.obesity = +data.obesity;
      data.poverty = +data.poverty;
      data.age = +data.age;
      data.income = +data.income;

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);


  return xAxis;

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


  return yAxis;

Provide some exploratory analysis of the graph.