Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
Unlisted
Edited
Feb 26
{
const chart = Plot.plot({
marks: [
Plot.barY(byState, {
x: "state",
y: "population",
sort: { x: "y", reverse: true },
tip: true
})
],
width
});
// Attach event listener to each rect
const rects = chart.querySelectorAll("rect");
rects.forEach((rect) => {
rect.addEventListener("pointerdown", (event) => {
// Call the custom click event handler
clickEvent(chart, chart.value, { x: "state", y: "population" });
});
});
return chart;
}
clickEvent = (plotObject, value, columns) => {
// Get the scales
const xScale = plotObject.scale("x");
const yScale = plotObject.scale("y");
// Create circle
const circle = document.createElementNS(
"http://www.w3.org/2000/svg",
"circle"
);
// Position it using the scales
circle.setAttribute(
"cx",
xScale.apply(value[columns.x]) + xScale.bandwidth / 2
);
circle.setAttribute("cy", yScale.apply(value[columns.y]));
circle.setAttribute("r", 5);
circle.setAttribute("fill", "red");
// Append
plotObject.appendChild(circle);
}
{
const chart = Plot.plot({
y: { tickFormat: "s" },
marks: [
Plot.barY(tidy, {
x: "state",
y: "population",
fill: "age",
sort: { x: "y", reverse: true },
tip: true
})
],
width
});
// Attach event listener to each <rect>
const rects = chart.querySelectorAll("rect");
rects.forEach((rect) => {
rect.addEventListener("pointerdown", (event) => {
// Call the custom click event handler
clickEvent(chart, chart.value, { x: "state", y: "population" });
});
});
return chart;
}
getTransformed(
tidy,
Plot.stackY({
x: "state",
y: "population",
fill: "age"
})
)
// For finding the element in the transformed data
findTransformedIndex = (value, transformedData) =>
transformedData.findIndex((d) =>
Object.keys(value).every((key) => d[key] === value[key])
)
{
const chart = Plot.plot({
y: { tickFormat: "s" },
marks: [
Plot.barY(tidy, {
x: "state",
y: "population",
fill: "age",
tip: true,
sort: { x: "-y" }
})
],
width
});
// Attach event listener to each <rect>
const rects = chart.querySelectorAll("rect");
rects.forEach((rect) => {
rect.addEventListener("pointerdown", (event) => {
// Explicitly transform the data
const transformed = getTransformed(
tidy,
Plot.stackY({
x: "state",
y: "population",
fill: "age"
})
);
// Find the value
const index = findTransformedIndex(chart.value, transformed.data);
const hoverValue = { ...chart.value, y: transformed.y2[index] };
// Call the custom click event handler
clickEvent(chart, hoverValue, { x: "state", y: "y" });
});
});
return chart;
}
// Renamed the `spot` function from https://observablehq.com/@enjalot/plot-spot
getTransformed = (
data = [],
{ transform, ...channels },
facets = [Uint32Array.from(data, (d, i) => i)]
) => {
if (transform !== undefined) {
({ data, facets } = transform(data, facets));
}
return {
data,
facets,
...Object.fromEntries(
Object.entries(channels).map(([name, value]) => [
name,
Plot.valueof(data, value)
])
)
};
}
import { tidy } from "@observablehq/plot-stacked-bar-chart"
byState = Array.from(
d3.rollup(
tidy,
(values) => d3.sum(values, (d) => d.population), // Sum population per state
(d) => d.state // Group by state
),
([state, population]) => ({ state, population }) // Convert Map to array of objects
)
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.