Wise Fool.
Visioneer.
Published
Edited
Jan 3, 2022
Importers
2 stars
Also listed in…
SVG
svg`<svg width="${w}" height="${w}" viewBox="-1 -1 2 2">
${quadrant(-1, -1, f, 1, 0, "red")}
${quadrant(1, -1, f, 1, 90, "yellow")}
${quadrant(1, 1, f, 1, 180, "blue")}
${quadrant(-1, 1, f, 1, 270, "black")}
</svg>`
quadrant = (x, y, f, scale, angle, color) => `<path `
+ `transform="translate(${f * x}, ${f * y})`
+ `scale(${scale})`
+ `rotate(${angle})" `
+ `d="${arcy({closed: true, turn1: 0, turn2: 1/4})}"`
+ `fill="${color}" `
+ `/>`
arc = ({sweep, large}) => `M${startPointX} ${startPointY}A${rx} ${ry} ${xAxisRotation} ${large} ${sweep} ${endPointX} ${endPointY}`
// arc({x, y, r, ang1, ang2})
// appends a counterclockwise arc of a circle to the current path,
// possibly preceded by a straight line segment.
// (x, y): center,
// r: radius
// ang1: angle of a vector from (x, y) of length r to the first endpoint of the arc
// ang2: angle of a vector from (x, y) of length r to the second endpoint of the arc
//
// if ((turns = ang2 - ang1) >= 1), draw a full cricle
// (rather than an arc starting at nothing)
// a circle is drawn by drawing two complementary half-circles
arcy = ({
x = 0,
y = 0,
r = 1,
turn1 = 0,
turn2 = 1/2,
tilt = 1,
large = 0,
sweep = 1,
closed = false,
} = {}) =>
{
const {sin, cos} = Math;
const a1 = turn1 * tau;
const a2 = turn2 * tau;
const rx = r * cos(a1);
const ry = r * sin(a1);
large = (turn2 < .5 ? large : 1 - large);
y = r * sin(a1 + a2);
x = r * cos(a1 + a2);
const initial = closed ? `M${x} ${y}L0 0L${rx} ${ry}` : "";
return (turn2 < 1)
? `${initial}M${rx} ${ry}A${r} ${r} ${tilt} ${large} ${sweep} ${x} ${y}M0 0${closed ? "z" : ""}`
: `M${-r} ${0}A${r} ${r} ${tilt} ${large} ${sweep} ${r} 0A${r} ${r} ${tilt} ${large} ${sweep} ${-r} 0`
}
svg`<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 315
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>`
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.
