Published
Edited
May 28, 2019
4 forks
7 stars
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, r1, 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(5))
.join(',')
return [
`M${point(r0, d0)}`,
`A${r0},${r0},0,${arc},1,${point(r0, d1)}`,
`L${point(r1, d1)}`,
`A${r1},${r1},0,${arc},0,${point(r1, d0)}`,
'Z',
].join('')
}
segment = (n) => {
const center = svgSize/2
const degrees = 360 / segments
const start = degrees * n
const end = (degrees * (n + 1 - margin) + (margin == 0 ? 1 : 0))
const path = segmentPath(center, center, radius, radius-width, start, end)
const fill = chroma.lch(80,150,start + degrees/2).alpha(1)
return `<path d="${path}" style="fill:${fill};stroke:none" />`
}
segmentCircle = (n=0) => {
const degree = n * (360 / segments)
const alpha = 1 / Math.log2(segments)
const [cx, cy] = polarToCartesian(svgSize/2, svgSize/2, radius-width, degree).map(n=>n.toPrecision(4))
const fill = chroma.lch(100,140,degree).alpha(alpha)
return `<circle cx=${cx} cy=${cy} r=${width} style="fill:${fill};stroke:none" />`
}
range = (n) => [...Array(n).keys()]
chroma = require('chroma-js')
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.
