{
const r = 22.5;
const margin = 2.2 * r;
const height = width / 2;
const hexbin = d3
.hexbin()
.extent([
[2 * r, 2 * r],
[width - 2 * r, height - 2 * r]
])
.radius(r);
const hexbin1 = d3
.hexbin()
.extent([
[2 * r, 2 * r],
[2 * r, 2 * r]
])
.radius(r);
return html`<svg viewBox="0 0 ${width} ${height}" stroke-width="0.5">
<rect fill="none" stroke="#333" stroke-dasharray="5 3"
x=${margin} y=${margin} width=${width - 2 * margin} height=${height - 2 * margin}></rect>
<path fill="none" stroke="#ccc" d="${hexbin.mesh()}"></path>
<g font-family="sans-serif" font-size=12>
${hexbin
.centers()
.map(
([x, y], i) =>
svg`<text transform="translate(${x},${y})" dy="0.38em" text-anchor="middle">${i}</text>`
)}
</g>
<path fill="none" stroke="red" stroke-width=2 d="${hexbin1.mesh()}"></path>
</svg>`;
}
d3 = require("d3-hexbin@0.2")
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.
