{
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(500)
.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 update() {
d3.select(div)
.selectAll(".charts")
.data(attribs)
.join("div")
.attr("class", "charts")
.style("width", width / attribs.length)
.each(function(a) {
const data =
a === "Nationality"
? cs.groups.get(a).top(10)
: cs.groups.get(a).all();
d3.select(this)
.datum(data)
.call(charts.get(a));
});
}
update();
return div;
}