I work on explorable explanations, gamedev tutorials, and gamedev tools.
Published
Edited
Jan 31, 2021
5 stars
svg`<svg viewBox="-200 -60 400 200" style="max-width: 800px; max-height:40vw">
<circle r="50" fill="rgb(252, 213, 97)" stroke="black" />
<circle r="7" fill="gray" stroke="black" stroke-width="0.5" />
${colored_lines}
<path d="M 0,-50 l 3,4 l -6,0 Z" fill="black" transform="rotate(${-360*unwind})"/>
</svg>`
colored_lines = {
let svg = "";
for (let i = 0; i < num_arcs; i++) {
let radius = 50 * i / num_arcs;
let hue = (i / num_arcs) * 240 | 0;
let color = `hsl(${360-hue}, 50%, 50%)`;
let x = radius * Math.cos(unwind * 2*Math.PI), y = -radius * Math.sin(unwind * 2*Math.PI);
svg += `<path d="M ${radius},0 A ${radius},${radius},0,${unwind>0.5?1:0},0,${x},${y}" stroke="${color}" stroke-width="1.5" fill="none"/>`
svg += `<circle cx="${x}" cy="${y}" r="1.8" fill="${color}"/>`;
let horiz = 200*unwind * (i/num_arcs), vert = (i / num_arcs) * 50;
svg += `<path d="M -100,${70+vert} l ${horiz},0" stroke="${color}" stroke-width="1.5" fill="none"/>`;
svg += `<circle cx="${-100+horiz}" cy="${70+vert}" r="1.8" fill="${color}"/>`;
}
return svg;
}
import {slider} from "@jashkenas/inputs"
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.
