Public
Edited
Jun 21, 2021
1 fork
1 star
{
const width = 900;
const height = 5062;
const svg = d3.select(DOM.svg(width, height));
let mySVG = svg.attr("viewBox", "0 0 800 4500");
let colSize = 8;
let groups = [];
for (let i = 0; i < 360; i++) {
mySVG
.append("g")
.attr("class", `group-${i}`)
.attr(
"transform",
`translate(${(i % colSize) * 100}, ${Math.floor(i / colSize) * 100})`
)
.append("rect")
.attr("width", 100)
.attr("height", 100)
.style("fill", "none")
.style("stroke", "gray");
}
for (let i = 0; i < 360; i++) {
let curGroup = mySVG.select(`g.group-${i}`);
curGroup
.append("path")
.attr("d", allShapes[i].path.replace(/.*d=\"(.*)\"\/>.*/, "$1"))
.style("stroke", "black")
.style("fill", "none");
let textGroup = curGroup
.append("g")
.attr("class", "text-group")
.attr("transform", "translate(0, 85)");
textGroup
.append("rect")
.attr("x", (100 - 60) / 2)
.attr("rx", 2)
.attr("width", 60)
.attr("height", 14)
.style("fill", "black")
.style("opacity", "0.4");
textGroup
.append("text")
.text(allShapes[i].shape)
.attr("x", 50)
.attr("y", 2)
.style("font-size", "11")
.style("fill", "white")
.style("font-family", "-apple-system, BlinkMacSystemFont")
.attr("text-anchor", "middle")
.attr("dominant-baseline", "hanging");
}
return mySVG.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.
