Public
Edited
Oct 18, 2023
width / height
chart = {
const marginTop = 20;
const marginRight = 30;
const marginBottom = 30;
const marginLeft = 40;
// const { brickWidth, brickHeight, gap, strokeWidth } = form;
const { gap, strokeWidth } = form;
const aspectRatio = width / height; // Assuming width and height are the desired aspect ratio of the final brick layout
const numCols = Math.sqrt(totalBricks * aspectRatio);
const numRows = totalBricks / numCols;
const brickWidth = width / numCols;
const brickHeight = height / numRows;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
// Create a threshold scale
const colorScale = d3
.scaleThreshold()
.domain([0, 200, 400, 600]) // Specify the thresholds (index values)
.range(colorRange); // Specify the color range
// Loop through each row and column to draw bricks
const rc = rough.svg(svg.node());
// Color scale by index
// Loop through each row and column to draw bricks
for (let i = 0; i < numRows; i++) {
for (let j = 0; j < numCols; j++) {
// Alternate starting position for every other row for the brick effect
const xOffset = i % 2 === 0 ? brickWidth / 2 : 0;
// Adjust number of bricks for alternating rows to cover the entire width
if (i % 2 === 0 && j === numCols - 1) {
continue;
}
const node = rc.rectangle(
j * (brickWidth + gap) + xOffset,
i * (brickHeight + gap),
brickWidth,
brickHeight,
{
fill: colorScale(i * numCols + j),
roughness, // Adjust for a more or less hand-drawn look
hachureAngle: -41, // angle of hachure,
hachureGap,
strokeWidth,
strokeColor,
fillStyle,
fillWeight
}
);
svg.node().appendChild(node);
}
}
return svg.node();
}
// numCols = Math.ceil(width / form.brickWidth)
// numRows = Math.ceil(height / (form.brickHeight + form.gap));
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.
