<svg width="${width}" height="500" id="scope">
<rect width="400" height="400" x="${width/2 - 200}" y="50"/>
<g transform="translate(${width/2},250)">
<path id="symbol"/>
</g>
<g id="collection">${
d3.symbols.map((symbol, i) => svg`<path
transform="translate(${width / 2 + 40 * (i + 0.5 - d3.symbols.length/2)}, 480)"
d="${d3.symbol(symbol, 300)()}"
/>`)}
</g>
</svg>
{
const path = d3.select(chart).select("#symbol"),
collection = d3.select(chart).select("#collection").selectAll("path"),
rect = d3.select(chart).select("rect"),
width = +rect.attr("width"),
height = +rect.attr("height"),
symbol = d3.symbol(),
symbolTypes = d3.symbols,
symbolNames = "circle cross diamond square star triangle wye".split(/ /);
let symbolIndex = -1;
do {
symbolIndex = (symbolIndex + 1) % symbolTypes.length;
symbol.type(symbolTypes[symbolIndex]);
yield symbolNames[symbolIndex];
path.attr("d", symbol.size(64));
collection.transition().style("fill", (_,i) => i === symbolIndex ? "#000" : "#999")
var box = path.node().getBBox(),
error = Math.min(width / box.width, height / box.height);
path
.transition()
.duration(1500)
.attr("d", symbol.size(error * error * 64));
} while (await Promise.race([invalidation, Promises.delay(2000, true)]));
}
<style>
#scope {
shape-rendering: crispEdges;
}
#scope rect {
fill: none;
stroke: #aaa;
stroke-width: 2px;
}
</style>
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.
