Public
Edited
Jul 30, 2024
Insert cell
Insert cell
Insert cell
{
const div = html`<div style="display:flex">`;

const charts = new Map();
for (let a of attribs) {
const chart = BrushableBarChart()
.x("value")
.y("key")
.width(width / attribs.length)
.height(800)
.onBrush((selection) => {
const keys = selection.map((d) => d.key);
cs.dims
.get(a)
.filter(keys.length === 0 ? null : (d) => keys.includes(d));
update();
});
charts.set(a, chart);
}

function updateAxisLabels(axLabels) {
const labels = document.querySelectorAll(".axisLabel");
axLabels.forEach((attr, index) => {
if (labels[index]) {
labels[index].textContent = attr;
}
});
}

function update() {
d3.select(div)
.selectAll(".charts")
.data(attribs)
.join("div")
.attr("class", "charts")
.style("width", width / attribs.length)
.each(function (a) {
const container = d3.select(this);

// Add title
container
.selectAll(".chart-title")
.data([labelDic[a]])
.join("div")
.attr("class", "chart-title")
.style("text-align", "center")
.style("font-weight", "bold")
.text((d) => d);

const data =
a === "Nationality"
? cs.groups.get(a).top(10)
: cs.groups.get(a).all();
d3.select(this).datum(data).call(charts.get(a));
});
d3.selectAll(".axisLabel")
.data(axLabels)
.text((d) => d);
}

update();
d3.selectAll(".axisLabel")
.data(axLabels)
.text((d) => d);
return div;
}
Insert cell
labelDic = ({
age: "Age",
weight_kg: "Weight",
height_cm: "Height",
work_rate: "Work Rate"
})
Insert cell
axLabels = [
"count",
"age",
"count",
"weight kg",
"count",
"height cm",
"count",
"work rate"
]
Insert cell
attribs = ["age", "weight_kg", "height_cm", "work_rate"]
Insert cell
data = (await FileAttachment("players_20.csv").csv()).map(d3.autoType)
Insert cell
cs = {
const cs = crossfilter(data);

cs.dims = new Map();
cs.groups = new Map();

for (let a of attribs) {
const dim = cs.dimension((d) => d[a]);

cs.dims.set(a, dim);
cs.groups.set(a, dim.group());
}

return cs;
}
Insert cell
crossfilter = require("crossfilter2")
Insert cell
import { BrushableBarChart } from "@john-guerra/d3-reusable-brushable-barchart-pattern"
Insert cell
d3 = require("d3@6")
Insert cell
Insert cell
Insert cell
Insert cell

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