Published
Edited
Mar 15, 2020
Importers
5 stars
{
const svg = d3.create("svg"),
components = gridLayout(6, 3, 25, true);
svg.attr("viewBox", [0, 0, components.outer_width, components.outer_height]);
const cmp = svg
.selectAll("g")
.data(components.items)
.enter();
cmp
.append("rect")
.attr("class", (_, i) => `item_${i + 1}`)
.attr("transform", d => `translate(${d.x}, ${d.y})`)
.attr("width", d => d.width)
.attr("height", d => d.height)
.attr("fill", "white")
.attr("stroke", "black");
return svg.node();
}
{
const svg = d3.create("svg"),
components = gridLayout(6, 3, 25);
svg.attr("viewBox", [0, 0, components.outer_width, components.outer_height]);
const cmp = svg
.selectAll("g")
.data(components.items)
.enter();
cmp
.append("circle")
.attr("class", (_, i) => `item_${i + 1}`)
.attr("transform", d => `translate(${d.x}, ${d.y})`)
.attr("r", d => d.width / 2)
.attr("fill", "white")
.attr("stroke", "black");
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.
