projection = {
const projection = d3
.geoAzimuthalEqualArea()
.fitSize([width, height], { type: "Sphere" });
return projection.scale(projection.scale() * 2.5);
}
// 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" }))
azimuthalEqualArea = () => `
float rho = sqrt(x * x + y * y);
if (rho > (2.0)) {
transparent = true;
} else {
float c = 2.0 * asin(rho / 2.0);
float sinc = sin(c);
float cosc = cos(c);
lambda = atan(x * sinc, rho * cosc);
phi = asin(y * sinc / rho);
}
`
height = width * 0.7
glproj = azimuthalEqualArea()
import { reglCanvas, createDrawCommand, regl } with {
width,
height,
projection,
glproj,
image
} from "@fil/phytoplankton"
d3 = require("d3-fetch", "d3-geo", "d3-geo-projection", "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.
