Wise Fool.
Visioneer.
Published
Edited
Jan 3, 2022
Importers
2 stars
Also listed in…
Discover
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>`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.