Data scientist and front-end developer at Jetpack.ai
mutable datum = ({
})
Plot.plot({
marks: [
Plot.frame(),
Plot.barX(data, {
x: "count",
y: "login",
fill: "black",
render: (index, scales, values, dimensions, context, next) => {
const g = next(index, scales, values, dimensions, context, next);
const children = d3.select(g).selectChildren();
children
.on("click", function (event, i) {
const selection = d3.select(event.target);
if (selection.classed("selected")) {
selection.classed("selected", false).style("fill", "black");
} else {
selection.classed("selected", true).style("fill", "darkred");
}
mutable datum = data[i];
})
.on("mouseover", function () {
d3.select(this).style("opacity", 0.5);
})
.on("mouseout", function () {
d3.select(this).style("opacity", 1);
children
.filter(function () {
return !d3.select(this).classed("selected");
})
.style("fill", "black");
});
return g;
}
})
]
})
data = [
{ login: "A", count: 3 },
{ login: "B", count: 7 },
{ login: "C", count: 1 },
{ login: "D", count: 4 }
]
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.
