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.
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.
