Public
Edited
Apr 12, 2023
6 forks
8 stars
{
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;
}
attribs = ["Position", "Nationality", "Overall", "Age"]
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;
}
data = (await FileAttachment("fifaData.csv").csv()).map(d3.autoType)
d3 = require("d3@6")
crossfilter = require("crossfilter2")
import { BrushableBarChart } from "@john-guerra/d3-reusable-brushable-barchart-pattern"
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.
