Wise Fool.
Visioneer.
Published
Edited
May 30, 2021
5 stars
Lambdoma table of ratiosGeometric construction of square rootsDieter RamsAudio FiltersHarmony Map45 degree gridTexture—Generative SnacksE series of preferred numbersWavesRingsSol Lewitt – Wall Drawing 273Test CardRadar Screen GlowStrategy CanvasCOVID-19 Netherlands Reproduction Number TutorialRun PlotCOVID-19-NL daily reported per MHSBlock QuoteTesla « Hoshin KanriSimultaanlimietSVG PatternsTartanBillboardFlowerElectronic color codeDonutCOVID-19 ReproductiegetalSTER & CultuurE series of preferred numbers and their colorsMoon PhasesX-MatrixMagic Balls Factory
Sun Logo
Also listed in…
Arty
sun = () => `<svg `
+ `width=${2*height} height=${2*height} ` // one square, to hold an S in each of its four quarters
+ `viewBox="${-height} ${-height} ${2*height} ${2*height}"` // origin in the square’s center
+ `fill="${fill}"`
+ `>`
+ `<g transform="scale(${Math.sqrt(1/2)})">${SUN}</g>` // sqrt(2) so it fits the 45˚ tilt
+ `${dot(".5%")}`
+ `</svg>`
SUN = [0, 1, 2, 3].reduce(S, "") // four times S, rotated 0°, 90°, 180°, 270° around its lower right point
S = (accu, k) => accu
+ `<g transform="rotate(${a + k * 90})">`
+ `<svg `
+ `viewBox="${-height} ${-height} ${4*height} ${4*height}"` // quarter square, centered origin
+ `>`
+ s
+ `${dot("1%")}`
+ `</svg>`
+ `</g>`
s = [0, 1].reduce(U, "") // single S: two Us: one rotated 0° and one rotated 180°
U = (accu, i) => accu + `<path transform="rotate(${180 * i})" d="${u}"/>`
// u as a closed path: two legs connected by a semi-circle; origin at (2r, 2r) from top left
u = `M${-r} ${-g}`
+ `a1 1 0 0 1 0 ${-2 * (r - g)}` // semi-circle
+ `h${3 * r - g}` // leg 1
+ `v${(r - 2 * g)}`
+ `h${-3 * r + g}`
+ `v${2 * g}` // bridge to leg 2
+ `h${3 * r - g}` // leg 2
+ `v${r - 2 * g}`
+ "z"
uGrid = `<svg `
+ `width="${height}" height="${height}" `
+ `viewBox="${-height} ${-height} ${2 * height} ${2 * height}">`
+ uu()
+ uu(ua)
+ `</svg>`
uu = (a, opacity) => `<g transform="rotate(${a ?? 0})" opacity="${(a ?? 180) === 180 ? 1 : .5}">`
+ `<rect x="-50%" y="-100%" width="100%" height="100%" fill="lightgrey"/>`
+ `<path fill="${fill}" d="${u}" />`
+ `<path stroke="white" fill="none" d="${grid}"/>`
+ `<circle r="${r}" fill="none" stroke="red" cx="-25%" cy="-25%"/>`
+ `<circle r="${r}" fill="none" stroke="red" cx="+25%" cy="-25%"/>`
+ dot("1%")
+ `</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.
