Rectangular Polyconic GLSLSatellite GLSLVan Der Grinten IV GLSLVan Der Grinten III GLSLVan Der Grinten II GLSLWinkel Tripel GLSLLee Modified Stereographic GLSLMiller Oblated Stereographic GLSLModified Stereographic GS48 GLSLModified Stereographic GS50 GLSLFoucaut GLSLLagrange GLSLKavrayskiy VII GLSLEisenlohr GLSLEckert VI GLSLEckert V GLSLEckert IV GLSLEckert III GLSLEckert II GLSLEckert I GLSLWagner VI GLSLPhytoplanktonBriesemeister GLSLRectilinear GLSLAzimuthal Equal-Area GLSLWebMercator to globeCordiform GLSLTransverse Mercator GLSLMercator GLSLMollweide GLSLAtlantis GLSLWiechel GLSLWagner VII GLSLTimes GLSLWagner IV GLSLEqual Earth GLSLConic Equal-Area GLSLAlbers GLSLEquirectangular GLSLConic Conformal GLSLConic Equidistant GLSLVan Der Grinten GLSLLittrow GLSLAzimuthal Equidistant GLSLArmadillo GLSLLarrivée GLSLCylindrical Equal-Area GLSLAitoff GLSLAiry GLSLAugust GLSLBerghaus GLSLBaker Transverse GLSLBaker GLSLBoggs GLSLBonne GLSLHammer GLSLBromley GLSLBottomley GLSLCollignon GLSLFahey GLSLTransverse Fahey GLSLLoximuthal GLSLCylindrical Stereographic GLSLCylindrical Equal-Area GLSLPolyconic GLSLPatterson GLSLMiller GLSLRobinson GLSL
Bertin1953 GLSL
Also listed in…
Projections
preamble = () => `
void forward(in float lambda, in float phi, inout float x, inout float y) {
float fu = 1.4, k = 12.;
if (lambda + phi < -fu) {
float u = (lambda - phi + 1.6) * (lambda + phi + fu) / 8.;
lambda += u;
phi -= 0.8 * u * sin(phi + halfPi);
}
// Hammer
float A = 1.68, B = 2.;
float cy = cos(phi), cxcy = cos(lambda / B) * cy;
float K = sqrt(2. / (1. + cxcy));
x = A * K * cy * sin(lambda / B);
y = K * sin(phi);
float d = (1. - cos(lambda * phi)) / k;
if (y < 0.) x *= (1. + d);
if (y > 0.) y *= (1. + d / 1.5 * x * x);
}
void newton2d(in float x, in float y, inout float a, inout float b, in float eps) {
float err2 = 100., da, db, px, py, pax, pay, pbx, pby, tx, ty, eps2 = 1e-8;
bool done = false;
for (int i = 0; i < 15; i++) if (!done) {
forward(a, b, px, py);
// diffs
tx = px - x,
ty = py - y;
if (abs(tx) + abs(ty) < eps2) {
done = true; // we're there!
continue;
}
// backtrack if we overshot
float h = tx * tx + ty * ty;
if (h > err2) {
a -= da /= 2.;
b -= db /= 2.;
continue;
}
err2 = h;
// partial derivatives
// **TODO: there's probably a better solution with dFdx(px)**
float ea = (a > 0. ? -1. : 1.) * eps,
eb = (b > 0. ? -1. : 1.) * eps;
forward(a + ea, b, pax, pay);
forward(a, b + eb, pbx, pby);
float dxa = (pax - px) / ea,
dya = (pay - py) / ea,
dxb = (pbx - px) / eb,
dyb = (pby - py) / eb,
// determinant
D = dyb * dxa - dya * dxb,
// newton step — or half-step for small D
l = (abs(D) < 0.5 ? 0.5 : 1.) / D;
da = (ty * dxb - tx * dyb) * l;
db = (tx * dya - ty * dxa) * l;
a += da;
b += db;
if (abs(da) + abs(db) < eps2) done = true; // we're crawling
}
}
void newton2d(in float x, in float y, inout float a, inout float b) {
newton2d(x, y, a, b, 1e-6);
}
`
projection = d3
.geoBertin1953()
.fitExtent([[10, 10], [width - 10, height - 10]], { type: "Sphere" })
// https://visibleearth.nasa.gov/images/57730/the-blue-marble-land-surface-ocean-color-and-sea-ice/57732l
image2 = FileAttachment("world.topo.200401.3x5400x2700.jpg")
.image()
.then(d => Object.assign(d, { style: "max-height:100px" }))
// https://visibleearth.nasa.gov/images/147190/explorer-base-map
image = FileAttachment("eo_base_2020_clean_3600x1800.png")
.image()
.then(d => Object.assign(d, { style: "max-height:100px" }))
height = width * 0.6
import { zoom, reglCanvas, createDrawCommand, regl } with {
width,
height,
projection,
glproj,
image,
preamble
} from "@fil/phytoplankton"
d3 = require("d3@7", "d3-geo-projection@3")
import { atan2, cos, degrees, halfPi, radians, sin, sqrt } from "@fil/math"
import { fullscreen } from "@fil/fullscreen"
fullscreen(canvas)
land = d3.json(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_land.geojson"
)
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.