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