Public
Edited
Apr 12
metrics = data.columns.filter(d => d.startsWith("std_mean_"));
metrics.forEach(m => {
svg.selectAll(".axis")
.filter(d => d === m)
.call(d3.brushY()
.extent([[-10, 0], [10, height]])
.on("brush", brushed)
);
});
yScales = new Map(metrics.map(m => [
m,
d3.scaleLinear()
.domain(d3.extent(data, d => d[m]))
.range([height - marginBottom, marginTop])
]));
xScale = d3.scalePoint()
.domain(metrics)
.range([marginLeft, width - marginRight]);
colorScale = d3.scaleOrdinal(d3.schemeCategory10)
.domain(data.map(d => d.diet_group).sort());
svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
svg.selectAll(".axis")
.data(metrics)
.enter()
.append("g")
.attr("class", "axis")
.attr("transform", d => `translate(${xScale(d)}, 0)`)
.each(function(d) { d3.select(this).call(d3.axisLeft(yScales.get(d))); })
.append("text")
.attr("y", marginTop - 10)
.attr("x", 0)
.attr("text-anchor", "middle")
.attr("fill", "black")
.text(d => d.replace("std_mean_", ""));
path = d => d3.line()(metrics.map(m => [xScale(m), yScales.get(m)(d[m])]));
lines = svg.append("g")
.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d", path)
.style("fill", "none")
.style("stroke", d => colorScale(d.diet_group))
.style("opacity", 0.5);
tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("background", "lightgray")
.style("border", "1px solid black")
.style("padding", "5px")
.style("border-radius", "5px")
.style("visibility", "hidden");
lines.on("mouseover", function(event, d) {
d3.select(this).style("opacity", 1);
tooltip.style("visibility", "visible")
.html(`Sex: ${d.sex}<br>Diet: ${d.diet_group}<br>Age: ${d.age_group}`);
})
.on("mousemove", function(event) {
tooltip.style("top", (event.pageY - 10) + "px")
.style("left", (event.pageX + 10) + "px");
})
.on("mouseout", function() {
d3.select(this).style("opacity", 0.5);
tooltip.style("visibility", "hidden");
});
function brushed(event, d) {
const selection = event.selection;
if (selection) {
const [minY, maxY] = selection.map(yScales.get(d).invert);
svg.selectAll("path")
.style("stroke", p => (p[d] >= minY && p[d] <= maxY ? "#69b3a2" : "#ccc"));
} else {
svg.selectAll("path").style("stroke", "#69b3a2");
}
}
svg.append("text")
.attr("x", width / 5)
.attr("y", height - marginBottom + 20)
.style("font-size", "20px")
.text("Parallel Coordinates Plot of Standardized Environmental Metrics");
function updatePlot(selectedSex, selectedDiet, selectedAge) {
lines.style("display", d =>
(!selectedSex || d.sex === selectedSex) &&
(!selectedDiet || d.diet_group === selectedDiet) &&
(!selectedAge || d.age_group === selectedAge) ? "block" : "none"
);
}
sexSelect.addEventListener("change", function() {
updatePlot(this.value, dietSelect.value, ageSelect.value);
});
dietSelect.addEventListener("change", function() {
updatePlot(sexSelect.value, this.value, ageSelect.value);
});
ageSelect.addEventListener("change", function() {
updatePlot(sexSelect.value, dietSelect.value, this.value);
});
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
