Consultant Designer & Developer
patternWeights = {
const wght = bias * 0.5 + 0.5;
return [
{ value: 0, weight: wght },
{ value: 1, weight: 1 - wght }
];
}
centers = hexbin.centers().map((pos) => {
const p = [...pos];
p.pattern = "hex-" + random.weightedSet(patternWeights);
return p;
})
function hexgonTile(opts = {}) {
const { id, r, strokeWidth, spokes, drawBorder, background } = Object.assign(
{
r: 1,
strokeWidth: 1,
spokes: [0, 2, 4],
drawBorder: true,
background: false
},
opts
);
const vertices = 6;
const dAngle = (Math.PI * 2) / vertices;
const angleOffset = -dAngle / 2;
const points = d3.range(6).map((i) => {
const angle = i * dAngle;
return [
r * Math.cos(angle + angleOffset),
r * Math.sin(angle + angleOffset)
];
});
const [x0, y0] = [0, 0];
function drawSpokes() {
return points
.map((p, i) => {
if (spokes.includes(i)) {
return svg`<line x1=${x0} y1=${y0} x2=${p[0]} y2=${p[1]}></line>`;
}
})
.filter(Boolean);
}
// transform=${`rotate(${radToDeg(-rotate * dAngle)})`}
return svg`<g
id=${id}
stroke="${palette.fg}"
stroke-width=${strokeWidth}
stroke-linecap="round"
>
<path
d="${d3.line()(points)}z"
fill=${background ? palette.bg : "none"}
stroke=${drawBorder ? palette.fg : "none"}
></path>
${drawSpokes()}
</g>`;
}
hexbin = d3Hexbin()
.extent([
[0, 0],
[w, h]
])
.radius(radius)
w = width
aspectRatio = 16 / 9
h = w / aspectRatio
palette = ({
bg: `hsl(0,0%,95%)`,
fg: `hsl(0,0%,5%)`,
debug: "#f0f"
})
svg = htl.svg
random = {
rnd.setSeed(randomize);
return rnd;
}
radToDeg = (rad) => (rad * 180) / Math.PI
import { seedButton } from "@saneef/seed-button"
import { CSRandom as rnd } from "@saneef/canvas-sketch-util"
import { getNotebookUrlWithParams, params } from "@saneef/notebook-url"
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.
