Placing SVG elements
Placing elements on a grid
{
const squareSize = 30;
const data = d3.range(1, 201);
const numCols = Math.ceil(Math.min(600, width) / squareSize)
const numRows = Math.floor(data.length / numCols)
const svg = d3.select(DOM.svg(numCols * squareSize, numRows * squareSize));
const padding = 3;
const color = d3
.scaleLinear()
.domain([0, d3.max(data)])
.range(["white", "red"]);
svg
.append("g")
.attr("transform", "translate(2,2)")
.selectAll("rect")
.data(data)
.join("rect")
.attr("width", squareSize - padding)
.attr("height", squareSize - padding)
.attr("x", (d, i) => (i % numCols) * (squareSize))
.attr("y", (d, i) => Math.floor(i / numCols) * (squareSize))
.attr("style", "stroke:black; fill: #ddd")
// .attr("fill", color);
return svg.node();
}
{
const squareSize = 30;
const numCols = 20;
const numRows = 10;
const padding = 3;
return d3
.select(DOM.svg(numCols * (squareSize + padding), numRows * (squareSize + padding)))
.call((svg) =>
svg
.selectAll("g")
.data(d3.range(numRows))
.join("g")
.attr("transform", (j) => `translate(2,${j * squareSize})`)
.selectAll("rect")
.data(d3.range(numCols)) // 10 squares per row
.join("rect")
.attr("transform", (i) => `translate(${i * squareSize},2)`)
.attr("width", squareSize - padding)
.attr("height", squareSize - padding)
.attr("style", "stroke:black; fill: #ddd")
)
.node();
}
{
const squareSize = 30;
const numCols = 20;
const numRows = 10;
const padding = 3;
return d3
.select(DOM.svg(numCols * (squareSize + padding), numRows * (squareSize + padding)))
.call((svg) =>
svg
.selectAll("rect")
.data(d3.cross(d3.range(numRows), d3.range(numCols)))
.join("rect")
.attr("transform", ([j, i]) => `translate(${(i * squareSize) + 2},${(j * squareSize + 2)})`)
.attr("width", squareSize - padding)
.attr("height", squareSize - padding)
.attr("style", "stroke:black; fill: #ddd")
)
.node();
}
{
const squareSize = 30;
const padding = 3;
const data = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
const svg = d3.select(DOM.svg(100, 100));
const g = svg
.selectAll("g")
.data(data)
.join("g")
.attr("transform", (d, i) => `translate(${[2, i * squareSize + 2]})`);
const rects = g
.selectAll("rect")
.data((d) => d)
.join("rect")
.attr("width", squareSize - padding)
.attr("height", squareSize - padding)
.attr("x", (d, i) => i * squareSize)
.attr("style", "stroke:black; fill: #ddd");
g.selectAll("text")
.data((d) => d)
.join("text")
.attr("x", (d, i) => i * squareSize + (squareSize - padding) / 2)
.attr("y", (squareSize - padding) / 2)
.attr("text-anchor", "middle")
.attr("dy", ".35em")
.text((d) => d);
return svg.node();
}
{
const squareSize = 30;
const padding = 3;
const data = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
const svg = d3.select(DOM.svg(100, 100));
const g = svg
.selectAll("g")
.data(data)
.join("g")
.attr("transform", (d, i) => `translate(${[padding, i * (squareSize + padding) + padding]})`);
g.each(function (D, j) {
d3.select(this)
.selectAll("rect")
.data((d) => d)
.join("rect")
.attr("width", squareSize)
.attr("height", squareSize)
.attr("x", (d, i) => i * (squareSize + padding))
.attr("style", "stroke:black; fill: #ddd");
d3.select(this)
.selectAll("text")
.data((d) => d)
.join("text")
.attr("x", (d, i) => i * (squareSize + padding) + squareSize / 2)
.attr("y", squareSize / 2)
.attr("text-anchor", "middle")
.attr("dy", ".35em")
.text((d, i) => D[i]);
});
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.
