Design Technologist, creator of plotterfiles.com and drawingbots.net, open source tools creator. On twitter: @msurguy
polarToCartesian = (x, y, r, degrees) => {
const radians = degrees * Math.PI / 180.0;
return [x + (r * Math.cos(radians)),
y + (r * Math.sin(radians))]
}
segmentPath = (x, y, r0, d0, d1) => {
// https://svgwg.org/specs/paths/#PathDataEllipticalArcCommands
const arc = Math.abs(d0 - d1) > 180 ? 1 : 0
const point = (radius, degree) =>
polarToCartesian(x, y, radius, degree)
.map(n => n.toPrecision(3))
.join(',')
return [
`M${point(r0, d0)}`,
`A${r0},${r0},0,${arc},1,${point(r0, d1)}`
].join('')
}
segment = (n) => {
const center = svgSize/2
const degrees = 360 / segments
const start = degrees * n
const strokeWidth = 2
const end = (degrees * (n + 1 - margin) + (margin == 0 ? 1 : 0))
const path = segmentPath(center, center, radius - strokeWidth, start, end)
return `<path d="${path}" stroke-width="${strokeWidth}" fill="none" stroke="green" />`
}
range = (n) => [...Array(n).keys()]
import {form} from "@mbostock/form-input"
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.
