Consultant Designer & Developer
function drawCells({ squares, gap, cellSize, clipId } = {}) {
return squares.map(({ col, row, circles, bg }) => {
const x = col * (cellSize + gap) - gap / 2;
const y = row * (cellSize + gap) - gap / 2;
return htl.svg`
<g transform=${`translate(${x},${y})`}
clip-path="url(#${clipId})">
<rect
x=${gap}
y=${gap}
width=${cellSize}
height=${cellSize}
fill=${bg}
style=${{
fillOpacity: opacity
}}
></rect>
${drawCircles({ circles, gap, cellSize })}
</g>`;
});
}
function drawCircles({ circles, gap, cellSize }) {
return circles.map(({ r, u, v, fill, blend }) => {
const cx = gap + math.lerp(0, cellSize, u);
const cy = gap + math.lerp(0, cellSize, v);
const R = math.lerp(0, cellSize, r);
return htl.svg`<circle
cx=${cx}
cy=${cy}
r=${R}
fill=${fill}
style=${{
mixBlendMode: mixBlend && blend ? "multiply" : "normal",
fillOpacity: blend ? opacity : 1
}}
></circle`;
});
}
squares = {
const { rows, cols } = grid;
const [minR, maxR] = radiusExtent;
// Using random numbers here doesn't produce
// same results with same seed.
const rNoiseWindow = 19;
const posThetaNoiseWindow = 1000;
const posRadiusNoiseWindow = 58999;
return d3.range(rows).flatMap((j) =>
d3.range(cols).map((i) => {
const palette = getRandomPalette();
let circles = [
{ fill: palette.paper },
{ fill: palette.hue1, blend: true },
{ fill: palette.hue2, blend: true }
];
circles = circles.map((c, k) => {
const rNoiseFreq = math.lerp(1 / 50, 100, rNoiseFactor);
const rNoise =
0.5 + 0.5 * rnd.noise4D(k, j, i, rNoiseWindow, rNoiseFreq);
const r = minR + rNoise * (maxR - minR);
const posAngleNoise =
0.5 +
0.5 * rnd.noise4D(k, j, i, posThetaNoiseWindow, angleNoiseFactor);
const theta = posAngleNoise * Math.PI * 2;
const posRadiusNoise =
0.5 * rnd.noise4D(k, j, i, posRadiusNoiseWindow, posNoiseFactor);
const posRadius = posRadiusNoise;
const u = 0.5 + Math.cos(theta) * posRadius;
const v = 0.5 + Math.sin(theta) * posRadius;
return { ...c, r, u, v };
});
return {
col: i,
row: j,
circles,
bg: palette.bg
};
})
);
}
radiusExtent = [1 / 8, 1 / 2]
maxSize = Math.min(width, height)
grid = squaresInRectangle(640, 400, 20)
//({ rows: 5, cols: 8 }) // Based on 640px wide and 400 px tall aspect ratio
width = grid.side * grid.cols
height = grid.side * grid.rows
gap = (gapUV * maxSize) / 20
cellSize = width / grid.cols - gap
paper = "#e8e9e4"
colors = [
{ weight: 5, value: "#3083c9" }, // blue
{ weight: 4, value: "#ca321b" }, // red
{ weight: 1, value: "#e9e10d" } // yellow
]
getRandomPalette = () => {
const bg = rnd.weightedSet(colors);
const [hue1, hue2] = rnd
.shuffle(colors)
.filter((c) => c.value !== bg)
.map((c) => c.value);
const palette = { bg, hue1, hue2, paper };
return palette;
}
rnd = {
CSRandom.setSeed(randomize);
return CSRandom;
}
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.
