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 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 GLSL
Robinson GLSL
Also listed in…
Projections
projection = d3.geoRobinson().fitSize([width, height], { type: "Sphere" })
// 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" }))
glproj = `
float yy = y / halfPi;
phi = yy * 90.;
float i = min(18., abs(phi / 5.)), di;
vec2 k;
int i0;
for (int ii = 19; ii >= 0; ii--) {
if (ii > int(max(0., floor(i)))) continue;
i0 = ii;
K(i0, k);
float ay = k[1];
K(i0 + 1, k);
float by = k[1];
K(i0 + 2, k);
float cy = k[1],
u = cy - ay,
v = cy - 2. * by + ay,
t = 2. * (abs(yy) - by) / u,
c = v / u;
di = t * (1. - c * t * (1. - 2. * c * t));
if (0. < di || i0 == 1) {
phi = (y > 0. ? 5. : -5.) * (di + i);
for (int j = 50; j > 0; j--) {
i = min(18., abs(phi) / 5.);
i0 = int(i);
di = i - float(i0);
K(i0, k);
ay = k[1];
K(i0 + 1, k);
by = k[1];
K(i0 + 2, k);
cy = k[1];
phi -= (sign(y) * halfPi * (by + di * (cy - ay) / 2. + di * di * (cy - 2. * by + ay) / 2.) - y) * 180. / pi;
}
}
}
K(i0, k);
float ax = k[0];
K(i0 + 1, k);
float bx = k[0];
K(i0 + 2, k);
float cx = k[0];
lambda = x / (bx + di * (cx - ax) / 2. + di * di * (cx - 2. * bx + ax) / 2.);
phi *= pi / 180.;
if (abs(lambda) > pi) transparent = true;
`
preamble()
preamble = () => `
void K(in int i, out vec2 k) {
${[
[0.9986, -0.062],
[1.0000, 0.0000],
[0.9986, 0.0620],
[0.9954, 0.1240],
[0.9900, 0.1860],
[0.9822, 0.2480],
[0.9730, 0.3100],
[0.9600, 0.3720],
[0.9427, 0.4340],
[0.9216, 0.4958],
[0.8962, 0.5571],
[0.8679, 0.6176],
[0.8350, 0.6769],
[0.7986, 0.7346],
[0.7597, 0.7903],
[0.7186, 0.8435],
[0.6732, 0.8936],
[0.6213, 0.9394],
[0.5722, 0.9761],
[0.5322, 1.0000],
[0.5322, 1.0000] // 19+
]
.map(
(d, i) =>
`if (i == ${i}) k = vec2(${d[0].toFixed(5)}, ${(d[1] * 1.0144).toFixed(
5
)});`
)
.join("\n else ")}
}
`
height = (width * 0.5) | 0
import { reglCanvas, createDrawCommand, regl } with {
width,
height,
projection,
glproj,
image,
preamble
} 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.
