Public
Edited
Oct 12, 2023
draw(2, false)
function draw(steps, shouldEnlarge) {
let svg = d3.create("svg")
.attr("width", width)
.attr("height", 500);
// Initial parameters
let size = 200;
let x = 400;
let y = 50;
function drawInitialShape(x, y, size) {
// ... (unchanged)
}
function drawDividingLines(x, y, size) {
// Vertical line
let vLine = svg.append("line")
.attr("x1", x)
.attr("y1", y + size / 2)
.attr("x2", x)
.attr("y2", y + size / 2)
.attr("stroke", "black")
.attr("stroke-width", 2)
.attr("stroke-dasharray", size)
.attr("stroke-dashoffset", size);
// Horizontal line
let hLine = svg.append("line")
.attr("x1", x - size / 4)
.attr("y1", y + size)
.attr("x2", x - size / 4)
.attr("y2", y + size)
.attr("stroke", "black")
.attr("stroke-width", 2)
.attr("stroke-dasharray", size / 2)
.attr("stroke-dashoffset", size / 2);
return { vLine, hLine };
}
function enlargeAndSubdivide(step) {
if (step <= 0) return;
if (shouldEnlarge) {
size *= 2;
x -= size / 4;
y -= size / 4;
}
let lines = drawDividingLines(x, y, size);
lines.vLine.transition()
.duration(1000)
.attr("y1", y - size / 2)
.attr("y2", y + size / 2)
.attr("stroke-dashoffset", 0);
lines.hLine.transition()
.duration(1000)
.attr("x1", x - size / 2)
.attr("x2", x + size / 2)
.attr("stroke-dashoffset", 0)
.on("end", () => { if (lines.vLine.node().getTotalLength() > 0) enlargeAndSubdivide(step - 1); });
}
drawInitialShape(x, y, size);
enlargeAndSubdivide(steps);
return svg.node();
}
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.
