viewof wrapperRectWidth = html`<input type="range" min=1 max=55 />`
wrapperRect = wrapperRectWidth;
outerRadius = wrapperRectWidth/3
innerRadius = outerRadius-1
oneOrZero = `
M ${outerRadius*3} ${-outerRadius}
l 0 ${outerRadius*2}
Z
M ${outerRadius}, ${-outerRadius*2}
m 0, ${outerRadius}
a ${outerRadius}, ${outerRadius}, 0, 1, 0, 1, 0
Z
m 1 ${outerRadius-innerRadius}
Z`
.replace(/\n/g,' ')
.replace(/\t/g,' ')
.trim()
.replace(/ /g,'')
oneAndOne = `
M ${outerRadius*2} ${-outerRadius}
l 0 ${outerRadius*2}
M ${outerRadius*3} ${-outerRadius}
l 0 ${outerRadius*2}
Z`
.replace(/\n/g,' ')
.replace(/\t/g,' ')
.trim()
.replace(/ /g,'')
oneOrMany = `M ${outerRadius*3} ${-outerRadius}
l 0 ${outerRadius*2}
Z
M ${outerRadius*2} 0
L 0 ${-outerRadius}
Z
M ${outerRadius*2} 0
L 0 0
Z
M ${outerRadius*2} 0
L 0 ${outerRadius}
Z
`
.replace(/\n/g,' ')
.replace(/\t/g,' ')
.trim()
.replace(/ /g,'')
zeroOrMany = `
M ${outerRadius*2} 0
L 0 ${-outerRadius}
Z
M ${outerRadius*2} 0
L 0 0
Z
M ${outerRadius*2} 0
L 0 ${outerRadius}
Z
M ${outerRadius*3}, ${-outerRadius*2}
m 0, ${outerRadius}
a ${outerRadius}, ${outerRadius}, 0, 1, 0, 1, 0
Z
m 1 ${outerRadius-innerRadius}
Z
`
.replace(/\n/g,' ')
.replace(/\t/g,' ')
.trim()
.replace(/ /g,'')
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.
