projection = d3.geoBottomley().fitSize([width, height], { type: "Sphere" })
// Image Source: https://www.flickr.com/photos/vitroids/2811419692/
image = d3
.image("https://farm4.staticflickr.com/3138/2811419692_d101c2e926_b.jpg", {
crossOrigin: "anonymous"
})
.then(d => Object.assign(d, { style: "max-height:100px" }))
glproj = `
float sinPsi = ${projection.fraction()},
x1 = x * sinPsi,
y1 = halfPi - y,
rho = sqrt(x1 * x1 + y1 * y1),
eta = atan(x1, y1);
lambda = rho / sin(rho) * eta / sinPsi;
phi = halfPi - rho;
if (abs(lambda) > pi) transparent = true;
`
height = width * 0.52
import { reglCanvas, createDrawCommand, regl } with {
width,
height,
projection,
glproj,
image
} from "@fil/phytoplankton"
d3 = require("d3-fetch", "d3-geo", "d3-geo-projection@2", "d3-timer")
import { checkbox, radio } 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.
