31:T5c8,hexagonBorder = { const w = borderWidth / radius; const v = borderAlign === "inner" ? 1 : borderAlign === "outer" ? 1 + w : 1 + w / 2; const vI = v - w; const h = v / 2; const hI = h - w / 2; const x = Math.sqrt(v ** 2 - h ** 2); const xI = Math.sqrt(vI ** 2 - hI ** 2); const top = [0, v]; const topInner = [0, vI]; const rightTop = [x, h]; const rightTopInner = [xI, hI]; const rightBottom = [x, -h]; const rightBottomInner = [xI, -hI]; const bottom = [0, -v]; const bottomInner = [0, -vI]; const leftBottom = [-x, -h]; const leftBottomInner = [-xI, -hI]; const leftTop = [-x, h]; const leftTopInner = [-xI, hI]; yield candygraph.createDataset( cg, // prettier-ignore [ // right-top ...top, ...rightTopInner, ...topInner, ...top, ...rightTop, ...rightTopInner, // right-middle ...rightTop, ...rightBottomInner, ...rightTopInner, ...rightTop, ...rightBottom, ...rightBottomInner, // right-bottom ...rightBottom, ...bottomInner, ...rightBottomInner, ...rightBottom, ...bottom, ...bottomInner, // left-bottom ...bottom, ...leftBottomInner, ...bottomInner, ...bottom, ...leftBottom, ...leftBottomInner, // left-middle ...leftBottom, ...leftTopInner, ...leftBottomInner, ...leftBottom, ...leftTop, ...leftTopInner, // left-top ...leftTop, ...topInner, ...leftTopInner, ...leftTop, ...top, ...topInner, ] ); }32:[] 2f:{"title":"Candygraph Hexbin Plot","cells":[{"id":0,"value":"# Candygraph Hexbin Plot\n\nThis notebook re-implements the SVG-based hexbin plot from [@d3/hexbin](https://observablehq.com/@d3/hexbin) with [CandyGraph](https://observablehq.com/@d3/hexbin) for rendering the plot with WebGL. Added bonus, you can adjust the border alignment if you like.","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"viewof radius = {\n const form = html``;\n form.i.oninput = () =>\n (form.o.value = `${(form.value = form.i.valueAsNumber)}px radius`);\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"viewof borderWidth = {\n const form = html``;\n form.i.oninput = () =>\n (form.o.value = `${(form.value = form.i.valueAsNumber)}px border`);\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"viewof borderAlign = Inputs.radio(['inner', 'middle', 'outer'], {\n label: 'Border Alignment',\n value: 'inner'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"canvas = html`