projection = d3
.geoBaker()
.fitExtent([[2, 2], [width - 2, height - 2]], { type: "Sphere" })
import { image } from "@fil/armadillo-glsl"
glproj = `
float pi_4 = pi / 4., f = pi_4, y0 = abs(y), sqrt8 = sqrt(8.), cosPhi_2, tanPhi_2;
if (y0 < ${Math.log(1 + Math.sqrt(2))}) {
lambda = x;
phi = 2. * atan(exp(y)) - halfPi;
} else {
for (int i = 0; i < 25; i++) {
cosPhi_2 = cos(f / 2.);
tanPhi_2 = tan(f / 2.);
f -= (sqrt8 * (f - pi_4) - log(tanPhi_2) - y0) / (sqrt8 - cosPhi_2 * cosPhi_2 / (2. * tanPhi_2));
}
lambda = x / (cos(f) * (sqrt8 - 1. / sin(f)));
phi = sign(y) * f;
}
`
height = width * 0.7
import { reglCanvas, createDrawCommand, regl } with {
width,
height,
projection,
glproj,
image
} from "@fil/phytoplankton"
d3 = require("d3@7", "d3-geo-projection@3")
import { drag } from "@d3/versor-dragging"
import { slider } from "@jashkenas/inputs"
import { cos, radians } from "@fil/math"
land = d3.json(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_land.geojson"
)
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.
