Public
Edited
Sep 22, 2023
Insert cell
Insert cell
pointer = settled(viewof pointer$, 100)
// pointer = pointer$
Insert cell
viewof pointer$ = Input2D()
Insert cell
trace = Trace({
r: xScale.invert(pointer.x * 512),
z: yScale.invert(pointer.y * 512),
})

Insert cell
xScale = d3.scaleLinear()
.domain([1.80, 3.78])
.range([0, +viewof pointer$.width])
Insert cell
yScale = d3.scaleLinear()
.domain([-1.0, +1.0])
.range([0, +viewof pointer$.height])
Insert cell
{
if (!trace) return;

const canvas = viewof pointer$;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, +canvas.width, +canvas.height);

for (let i=0, n=trace.r0.length; i<n; ++i) {
const r0 = trace.r0[i];
const z0 = trace.z0[i];
const x0 = xScale(r0);
const y0 = yScale(z0);

ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(x0, y0, 1, 0, 2*Math.PI);
ctx.fill();
const r1 = trace.r1[i];
const z1 = trace.z1[i];
const x1 = xScale(r1);
const y1 = yScale(z1);

ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(x1, y1, 1, 0, 2*Math.PI);
ctx.fill();
}
}
Insert cell
async function Trace({
r,
z,
}) {
const params = new URLSearchParams();
params.set('r', `${r}`);
params.set('z', `${z}`);
const url = new URL(`https://patchbay.pub/req/poincare/?${params}`);

const response = await fetch(url, {
mode: 'cors',
});
const json = await response.json();
return json;
}
Insert cell
function Input2D({
width=512,
height=512,
}={}) {
let $self;
return $self = htl.html`<canvas
style="border: 1px solid black"
width=${width}
height=${height}
onmousemove=${onmousemove}
></canvas>`;
function onmousemove(e) {
let [x, y] = d3.pointer(e);
x /= width;
y /= height;
console.log({ x, y });
$self.value = { x, y };
$self.dispatchEvent(new Event('input', { bubbles: true }));
}
}
Insert cell
import { settled } from '@player1537/utilities'
Insert cell

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.
Learn more