Engineer & Educator | Observable Ambassador | Karaoke Enthusiast
// Randomly pick numbers between 0 and 1
random_values = _.range(10000).map(d => Math.random())
<svg width=${width} height="100">
${
// Draw points showing a random y value sampled at each pixel across the horizontal axis
_.range(width).map(x => svg`<circle cx=${x} cy=${Math.random() * 100} r=2 fill="black"/>`)
}
</svg>
// Require a library for generating simplex noise
SimplexNoise = require('simplex-noise@2.4')
// Create a new instance of our simplex noise object
simplex = new SimplexNoise()
<svg width=${width} height="100">
<g transform="translate(0, 50)">
${
// Draw a line showing a random y value sampled at each pixel across the horizontal axis
_.range(width).map(
(x) =>
svg`<circle cx=${x} cy=${
simplex.noise2D(x / smoothness, 1 / smoothness) * 50
} r=1 />`
)
}
</g>
</svg>
<svg width="${w}" height="${h}">
<rect x="0" y="0" width="${w}" height="${h}" stroke="none" fill="black"></rect>
${_.range(num_rects)
.map(i => {
const angle = (Math.PI * 2 * i) / num_rects;
const mag = w / 4 + 70;
const size = 50;
const pos = PVector((w - size) / 2, (h - size) / 2).add(
PVector()
.setMag(mag)
.rotateBy(angle)
);
return svg`<rect
width="${size}"
height="${size}"
stroke="white"
fill="none"
transform="translate(${pos.x},${pos.y})"
/>`;
})}
</svg>
<svg width="${w}" height="${h}">
<rect x="0" y="0" width="${w}" height="${h}" stroke="none" fill="black"></rect>
<g>
${_.range(num_rects)
.map(i => {
const angle = (Math.PI * 2 * i) / num_rects;
const mag = w / 4 + 70;
const pos = PVector((w - 50) / 2, (h - 50) / 2).add(
PVector()
.setMag(mag)
.rotateBy(angle)
);
const size = 75 * simplex.noise2D(pos.x / 15, pos.y / 15);
return svg`<rect
width="${size}"
height="${size}"
stroke="white"
fill="none"
transform="translate(${pos.x},${pos.y})"
/>`;
})
}
</g>
</svg>
now
// Yield a value, 60 times a second
generator = {
let i = 0;
while (true) {
yield ++i;
}
}
<svg width=${width} height="100">
<circle cx=${generator} cy="50" r="20" />
</svg>
<svg width=${width} height="100">
<circle cx=${now % width} cy="50" r="20" />
</svg>
range = {
while (true) {
yield* _.range(-100, 100);
}
}
loop = Math.abs(range)
<svg width=${width} height="100">
<circle cx=${width * loop/100} cy="50" r="20" />
</svg>
sineWave = Math.sin(now / 1000)
<svg width=${width} height="100">
<circle cx=${width/2 + width/2 * sineWave} cy="50" r="20" />
</svg>
<svg width=${width} height="125">
<text y=20>Animated simplex noise values at each pixel along the horizontal</text>
<polyline transform="translate(0, 75)" fill="transparent" stroke-width="1" stroke="black" points="${
_.range(width).map(x => `${x}, ${simplex.noise2D(x/20, now/1000)*50}`).join(' ')
}" />
</svg>
<svg width=${width} height="120">
<polyline transform="translate(0, 75)" fill="transparent" stroke-width="1" stroke="black" points="${
_.range(width).map(x => `${x}, ${simplex.noise2D(x/curveSmooth, now/animationSlow)*50}`).join(' ')
}" />
</svg>
<svg width="${w}" height="${h}">
<rect x="0" y="0" width="${w}" height="${h}" stroke="none" fill="black"></rect>
<g>
${_.range(rectangles).map((i) => {
const angle = (Math.PI * 2 * i) / rectangles;
const mag = w / 4 + circleSize;
const pos = PVector(w / 2, h / 2).add(
PVector().setMag(mag).rotateBy(angle)
);
const size =
rectMaxSize *
simplex.noise2D(
(pos.x * Math.sin(now / xSlow)) / 100,
(pos.y * Math.cos(now / ySlow)) / 100
);
return svg`<rect
width="${size}"
height="${size}"
stroke="white"
fill="none"
transform="translate(${pos.x},${pos.y})"
/>`;
})}
</g>
</svg>
PVector = require('https://bundle.run/pvectorjs@1.2.0')
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.
