Public
Edited
Jan 9
1 star
viewof alignment = Inputs.radio(["top-left", "center"], {label: "Alignment", value: "center"})
{
const plotContainer = document.getElementById("waffle");
if (plotContainer) {
// Empty container
plotContainer.innerHTML = "";
Array.from(plotContainer.children).forEach((child) =>
plotContainer.removeChild(child)
);
// Set container width
plotContainer.style.width = `${containerWidth}px`;
plotContainer.style.height = `${containerHeight}px`;
if (alignment === "center") {
plotContainer.classList.add("center");
} else {
plotContainer.classList.remove("center");
}
// Calculate base waffle size from conatiner dimensions
const cols = Math.min(data.length, columnCount);
const rows = rowCount(data.length);
const maxHorizontal = containerWidth / cols;
const titleHeight = 60; // To be exact, this value would need measurement
const maxVertical = (containerHeight - titleHeight) / rows - labelSpacing;
const maxSide = Math.min(maxHorizontal, maxVertical);
const waffleInDiv = createWaffle(maxSide);
// Attach plot
plotContainer.appendChild(waffleInDiv);
return "Code to resize the chart container";
}
return "Container not found";
}
waffle = createWaffle(sideLength)
createWaffle = (sideLength) => {
const width = (sideLength * columnCount) / waffleRatio;
const height = (sideLength + labelSpacing) * rows;
const fyPadding = labelSpacing / sideLength;
return Plot.plot({
axis: null,
label: null,
height,
width,
fx: { padding: 0.1 },
fy: { padding: 0.1 },
y: { insetBottom: labelSpacing },
title: "Waffle chart",
subtitle: `Flexible settings and sizes with small multiples`,
marks: [
showFrame[0] ? Plot.frame() : null,
Plot.waffleY(
{ length: 1 },
{
unit: 1,
multiple: rowUnitCount,
gap,
y: unitCount,
fillOpacity: 0.3,
rx: "100%"
}
),
Plot.waffleY(
data.sort((a, b) => b.count - a.count),
{
fx: (d, i) => fx(i),
fy: (d, i) => fy(i),
gap,
multiple: rowUnitCount,
y: (d) => d.count,
rx: "100%",
fill: "orange",
round: true
}
),
Plot.text(data, {
fx: (d, i) => fx(i),
fy: (d, i) => fy(i),
text: (d) =>
(d.count / unitCount).toLocaleString("en-US", {
style: "percent"
}),
frameAnchor: "bottom",
lineAnchor: "top",
dy: -labelSpacing + metricFontSize * 0.25,
fill: "orange",
fontSize: metricFontSize,
fontWeight: "bold"
}),
Plot.text(data, {
fx: (d, i) => fx(i),
fy: (d, i) => fy(i),
text: (d) => d.key, //,
frameAnchor: "bottom",
lineAnchor: "top",
dy: -labelSpacing + metricFontSize * 1.25 + dimensionFontSize * 0.25,
fill: "slategrey",
fontSize: dimensionFontSize
})
]
});
}
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.
