Petroff QuincuncialTwo point equidistantCylindrical Equal-Area ProjectionsSatellite ExplorerHufnagelGs50Lee Oblated StereographicModified Stereographic AlaskaMiller Oblated StereographicInterrupted Homolosine OceansInterrupted Mollweide OceansFoucautGringorten QuincuncialWaterman’s ButterflyPolyhedral GnomonicGingeryGilbertFoucaut SinusoidalPolyhedral CollignonCollignonCylindrical Equal-AreaSatelliteCraigCrasterCylindrical StereographicEckert IEckert IIEckert IIIEckert VEckert VIEisenlohrFaheyGinzburg IVGinzburg VGinzburg VIGinzburg VIIIGinzburg IXGringortenGuyouHammer RetroazimuthalHEALPixEckert IVHill EucyclicLagrangeLarrivéeLaskowski Tri-OptimalLittrowLoximuthalRobinsonRectangular PolyconicPolyconicPatterson CylindricalNell–HammerNatural Earth IIFlat-Polar QuarticFlat-Polar ParabolicMillerFlat-Polar SinusoidalTimesVan der Grinten IVan der Grinten IIVan der Grinten IIIVan der Grinten IVWagner IVKavrayskiy VIIWagner VIWagner VIIWiechelWinkel TripelInterrupted SinusoidalPeirce QuincuncialBottomleyWernerBonneAtlantisMollweide HemispheresInterrupted MollweideInterrupted Goode HomolosineGoode HomolosineBromleyInterrupted Boggs EumorphicSinu-MollweideMollweideSinusoidalBoggs EumorphicBerghaus StarBaker DinomicAugustArmadilloAitoffAiry’s Minimum-ErrorHammerBriesemeisterInterrupted Sinu-Mollweide
GeoTIFF contours II
chart = html`<svg style="width: 100%; height: auto; display: block;" viewBox="0 0 960 500">
<g stroke="#000" stroke-width="0.5" stroke-linejoin="round" stroke-linecap="round">
${Array.from(contours(values), d => svg`<path d="${path(invert(d))}" fill="${color(d.value)}" />`)}
</g>
</svg>`
projection = d3.geoNaturalEarth1().precision(0.1)
path = d3.geoPath(projection)
contours = d3.contours().size([n, m])
color = d3.scaleSequential(d3.extent(values), d3.interpolateMagma)
image = tiff.getImage()
values = rotate((await image.readRasters())[0])
n = image.getWidth()
m = image.getHeight()
function rotate(values) {
var l = n >> 1;
for (var j = 0, k = 0; j < m; ++j, k += n) {
values.subarray(k, k + l).reverse();
values.subarray(k + l, k + n).reverse();
values.subarray(k, k + n).reverse();
}
return values;
}
function invert(d) {
const shared = {};
let p = {
type: "Polygon",
coordinates: d3.merge(d.coordinates.map(polygon => {
return polygon.map(ring => {
return ring.map(point => {
return [point[0] / n * 360 - 180, 90 - point[1] / m * 180];
}).reverse();
});
}))
};
// Record the y-intersections with the antimeridian.
p.coordinates.forEach(ring => {
ring.forEach(p => {
if (p[0] === -180) shared[p[1]] |= 1;
else if (p[0] === 180) shared[p[1]] |= 2;
});
});
// Offset any unshared antimeridian points to prevent their stitching.
p.coordinates.forEach(ring => {
ring.forEach(p => {
if ((p[0] === -180 || p[0] === 180) && shared[p[1]] !== 3) {
p[0] = p[0] === -180 ? -179.9995 : 179.9995;
}
});
});
p = d3.geoStitch(p);
// If the MultiPolygon is empty, treat it as the Sphere.
return p.coordinates.length
? {type: "Polygon", coordinates: p.coordinates}
: {type: "Sphere"};
}
tiff = FileAttachment("sfctmp.tiff").arrayBuffer()
.then(buffer => GeoTIFF.fromArrayBuffer(buffer))
GeoTIFF = require("geotiff@2.0.7")
d3 = require("d3@7", "d3-geo-projection@4")
Plot.plot({
projection: "equal-earth",
color: { scheme: "Magma" },
marks: [Plot.contour(values, {
x: (_, i) => i % n / 2 - 180,
y: (_, i) => 90 - Math.floor(i / n) / 2,
fill: values,
thresholds: 10,
stroke: "#000",
strokeWidth: 0.5,
clip: "sphere"
})]
})
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.
