Published
Edited
Jul 7, 2021
Insert cell
Insert cell
Insert cell
glproj = `
float phi0 = ${projection.parallel() * radians},
sinPhi0 = sin(phi0),
tanPhi;
phi = 0.;
y -= phi0;
if (abs(y += phi0) < 1e-6) {
lambda = sinPhi0 == 0. ? x : 2. * atan(sinPhi0 * x / 2.) / sinPhi0;
} else {
float k = x * x + y * y + 3e-6;
for (int i = 0; i < 10; i++) {
float tanPhi = tan(phi),
secPhi = 1. / cos(phi),
j = k - 2. * y * phi + phi * phi;
phi -= (tanPhi * j + 2. * (phi - y)) / (2. + j * secPhi * secPhi + 2. * (phi - y) * tanPhi);
}
float E = x * (tanPhi = tan(phi)),
A = tan(abs(y) < abs(phi + 1. / tanPhi) ? asin(E) * 0.5 : acos(E) * 0.5 + pi / 4.) / sin(phi);
lambda = sinPhi0 == 0. ? 2. * A : 2. * atan(sinPhi0 * A) / sinPhi0;
}
`
Insert cell
projection = d3
.geoRectangularPolyconic()
.parallel(40)
.fitExtent([[2, 2], [width - 2, height - 2]], { type: "Sphere" })
Insert cell
import { image } from "@fil/armadillo-glsl"
Insert cell
height = width * 0.6
Insert cell
import { reglCanvas, createDrawCommand, regl } with {
width,
height,
projection,
glproj,
image
} from "@fil/phytoplankton"
Insert cell
d3 = require("d3@7", "d3-geo-projection@3")
Insert cell
import { drag } from "@d3/versor-dragging"
Insert cell
import { slider } from "@jashkenas/inputs"
Insert cell
import { cos, radians } from "@fil/math"
Insert cell
land = d3.json(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_land.geojson"
)
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