Public
Edited
Jan 10, 2023
w = 600
h = 400
svg`<svg width="${w}" height="${h}">
<g>
${points.map((p, i) => `<circle
cx="${p[0]}"
cy="${p[1]}"
r="0.5"
stroke="black"
fill="none"
/>`).join('\n')}
</g>
</svg>`
imageData = readPixels(`https://images.unsplash.com/photo-1520390138845-fd2d229dd553?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=80`, { w, h , format: 'hsl', fit: true })
points = [[0, 0], [w, 0], [0, h], [w, h], ...new PoissonDiskSampling({
shape: [w, h],
minDistance: 2,
maxDistance: 10,
distanceFunction: p => {
const x = p[0] | 0
const y = p[1] | 0
const index = x + y * imageData.width
if(index < 0 || index >= imageData.pixels.length) return 1
return imageData.pixels[index][2]
},
tries: 10
}).fill().map(pt => pt.map(coord => coord | 0))]
PoissonDiskSampling = require("https://cdn.jsdelivr.net/gh/kchapelier/poisson-disk-sampling@2.0.0/build/poisson-disk-sampling.min.js")
import { readPixels } from '@makio135/give-me-colors'
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.
