{
fullscreen(canvas, { center: true });
const drawgl = createDrawCommand(regl);
do {
const lon = +((Date.now() / 300) % 360).toFixed(2);
projection.rotate([lon, 0]);
drawgl();
canvas.render();
yield lon;
} while (true);
}
image = FileAttachment("room.jpg")
.image()
.then(d => Object.assign(d, { style: "max-height:300px" }))
projection = d3.geoGnomonic()
gnomonic = () => `
float rho = sqrt(x * x + y * y);
float c = atan(rho, 1.0);
float sinc = sin(c);
float cosc = cos(c);
lambda = atan(x * sinc, rho * cosc);
phi = asin(y * sinc / rho);
`
projection.clipAngle(clipAngle).fitSize([width, height], { type: "Sphere" })
glproj = gnomonic()
import { reglCanvas, createDrawCommand, regl, fullscreen, height } with {
width,
projection,
glproj,
image
} from "@fil/phytoplankton"
d3 = require("d3-geo", "d3-geo-projection")
import { slider } from "@jashkenas/inputs"
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.
