Software engineer and visualization enthusiast. Lives in Cambridge, Massachusetts, with no dogs.
Published
Edited
Aug 15, 2020
28 stars
render(
m(
'svg',
{
style: { background: '#393939' },
viewBox: `${-n - pad} ${-n - pad} ${2 * (n + pad)} ${2 * (n + pad)}`
},
m(
'g',
{ id: 'thing' },
data.map(({ x, y, d }) => m(Lissajous, { samples, x, y, d }))
),
m('use', {
x: 0,
y: 0,
href: `${window.location}#thing`,
transform: `scale(1,-1)`
}),
m('use', {
x: 0,
y: 0,
href: `${window.location}#thing`,
transform: `scale(-1,1)`
}),
m('use', {
x: 0,
y: 0,
href: `${window.location}#thing`,
transform: `scale(-1,-1)`
})
),
container
)
pad = -0.5
Lissajous = ({ samples, x, y, d }) => {
let pc = 1 - ((x + 1) / n) * ((y + 1) / n);
return m(
'g',
{
transform: `translate(${x - 1}, ${y - 1})scale(0.75)`
},
m('path', {
fill: 'none',
strokeWidth: 0.035,
stroke: d3.lab(d3.interpolateTurbo(0.05 + 0.95 * pc)).brighter(0.5 * pc),
d: d(samples)
}),
m('circle', {
r: 0.05,
fill: '#fff',
cx: d.x()(last(samples)),
cy: d.y()(last(samples))
})
);
}
data = d3.cross(d3.range(1, n), d3.range(1, n), (x, y) => ({
x,
y,
d: d3
.line()
.curve(d3.curveCatmullRom)
.x(t => .5 * cos(x * t))
.y(t => .5 * sin(y * t))
}))
offset = {
let i = this || 0;
while (true) yield (i += speed);
}
sampleRate = 15
samples = d3.range(offset, offset + trailLength, 1 / sampleRate)
last = x => x[x.length - 1]
sin = Math.sin
cos = Math.cos
// replace circles with arrowheads?
// variable-size time steps? cf. https://observablehq.com/@mbostock/variable-speed-generator-test
d3 = require('d3@5.15.0')
import { m, render } from '@yurivish/react'
import { html } from '@observablehq/htl'
import { slider, checkbox } 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.
