viewof size = Inputs.range([500, 2000], {label: "zoom"})
FileAttachment("image@8.png").image()
r = 20
function polygon ({numSides = 3, fill = "black", stroke="none", center, size = r, theta = 0}) {
const points = [...Array(numSides).keys()]
.map(i => ((2 * Math.PI * i/ numSides) + theta) % (2 * Math.PI))
.map(d => [
Math.cos(d) * size + center[0],
Math.sin(d) * size + center[1]
]
);
const pointsStr = points
.map(p => p.join(","))
.reduce((m, e) => `${m.trim()} ${e}`, "");
return htl.svg.fragment`<polygon points="${pointsStr}" fill="${fill}"/>`
}
function starryGon ({numSides = 3, fill = "black", stroke="none", center, size = r, theta = 0}) {
const points = [...Array(numSides).keys()]
.map(i => ((4 * Math.PI * i/ numSides) + theta))
.map(d => [
Math.cos(d) * size + center[0],
Math.sin(d) * size + center[1]
]
);
const pointsStr = points
.map(p => p.join(","))
.reduce((m, e) => `${m.trim()} ${e}`, "");
return htl.svg.fragment`<polygon points="${pointsStr}" fill="${fill}"/>`
}
function i_to_center(i) {
const x = 2 * r * i + r;
const y = 2 * r * Math.floor(x / width) + r ;
return [x % width, y];
}
height = 200
width = 900
{
const baseShapes = [
{ numSides: 3, }
];
}
References
https://observablehq.com/@d3/color-schemes
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.
