Published
Edited
Jul 2, 2022
1 star
Multiple border colors
viewof subdivision = Inputs.range([1,10], {value: 5, step: 1, label: "Subdivision"})
{
const height = 250;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-width/2, -height/2, width, height]);
const size = 200;
for (let i=0; i<subdivision; i++) {
if (i === 0) {
svg.append("rect")
.attr("width", size)
.attr("height", size)
.attr("fill", "none")
.attr("stroke", d3.schemeCategory10[i])
.attr("stroke-width", 10)
.attr("transform", `translate(${-size/2},${-size/2})`);
} else {
svg.append("rect")
.attr("width", size)
.attr("height", size)
.attr("fill", "none")
.attr("stroke", d3.schemeCategory10[i])
.attr("stroke-width", 10)
.attr("stroke-dashoffset", Math.trunc(size*4/subdivision)*i)
.attr("stroke-dasharray", size*4)
.attr("transform", `translate(${-size/2},${-size/2})`);
}
}
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.
