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 GLSLBertin1953 GLSLWagner VI GLSLPhytoplanktonBriesemeister GLSLRectilinear GLSLAzimuthal Equal-Area GLSLWebMercator to globeTransverse 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
Cordiform GLSL
Also listed in…
Projections
glproj = stabWerner(1 + 1 / 21, 60)
stabWerner = (ratio, max) => `
y -= halfPi;
${azimuthalEqualArea()}
applyRotation(vec3(0, -90, 0), lambda, phi);
transparent = false;
if (halfPi - rho < ${(max * radians).toFixed(10)}) {
phi = halfPi - rho;
lambda = (rho / cos(phi)) * atan(x, -y);
lambda /= ${ratio.toFixed(10)};
}
`
projection = {
const projection = d3
.geoProjection(stabWernerRaw(1 + 1 / 21, 60))
.preclip(
d3.geoClipPolygon({
type: "Polygon",
coordinates: [
[
[0, -90],
[-180 + 1e-4, 0],
[-180 + 1e-4, 60],
[-180, 60],
[180 - 1e-4, 60],
[180 - 1e-4, 0],
[0, -90]
]
]
})
)
.rotate([-10, 0])
.precision(0.1)
.fitSize([width, height], { type: "Sphere" });
return projection.scale(projection.scale() * 1);
}
function stabWernerRaw(ratio, max) {
/*
* simplified Bonne, with phi0 = halfPi ;
* https://github.com/d3/d3-geo-projection/blob/master/src/bonne.js
*/
function r(lambda, phi) {
const rho = halfPi - phi,
e = rho ? (lambda * cos(phi)) / rho : rho;
return [rho * sin(e), -rho * cos(e)];
}
r.invert = function(x, y) {
var rho = sqrt(x ** 2 + y ** 2),
phi = halfPi - rho;
return [(rho / cos(phi)) * atan2(x, -y), phi];
};
/* azimuthal equidistant for the pole part */
const az = d3
.geoAzimuthalEquidistant()
.rotate([0, -90])
.translate([0, 0])
.scale(1);
/* mix */
function forward(lambda, phi) {
if (phi < max * radians) {
lambda *= ratio;
return r(lambda, phi);
} else {
const p = az([lambda * degrees, phi * degrees]);
return [p[0], -p[1]];
}
}
function invert(x, y) {
let i = az.invert([x, -y]);
if (i[1] < max) {
i = r.invert(x, y);
i[0] /= ratio;
} else {
i[0] *= radians;
i[1] *= radians;
}
return [i[0], i[1]];
}
forward.invert = invert;
return forward;
}
// Ancient Earth Images by Christopher Scotese. https://www.earthbyte.org/paleomap-paleoatlas-for-gplates/
image = d3
.image(
`https://raw.githubusercontent.com/typpo/ancient-earth/master/images/scrape/${period}.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
import { reglCanvas, createDrawCommand, regl } with {
width,
height,
projection,
glproj,
image
} from "@fil/phytoplankton"
d3 = require("d3@7", "d3-geo-projection@3", "d3-geo-polygon@1")
import { checkbox, radio, select } from "@jashkenas/inputs"
import { atan2, cos, degrees, halfPi, radians, sin, sqrt } from "@fil/math"
import { drag } from "@d3/versor-dragging"
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.