H3 hexagons & geoContours / Fil

Fil

Vocateur.

Workspace

Public

Edited

Feb 21, 2024

1 fork

8 stars

Projections

Kerkovits projection A map of Africa Cupola Projection Clipping spherical polygons A conformal Airocean Fill with stroke Markley’s tetrahedral map Synchronized projections Satellite GLSL Van Der Grinten IV GLSL Van Der Grinten III GLSL Van Der Grinten II GLSL Winkel Tripel GLSL Lee Modified Stereographic GLSL Miller Oblated Stereographic GLSL Modified Stereographic GS48 GLSL Modified Stereographic GS50 GLSL Foucaut GLSL Lagrange GLSL Kavrayskiy VII GLSL Eisenlohr GLSL Eckert VI GLSL Eckert V GLSL Eckert IV GLSL Eckert III GLSL Eckert II GLSL Eckert I GLSL Bertin1953 GLSL Robinson GLSL Miller GLSL Rectangular Polyconic GLSL Patterson GLSL Polyconic GLSL Loximuthal GLSL Cylindrical Stereographic GLSL Cylindrical Equal-Area GLSL Transverse Fahey GLSL Fahey GLSL Collignon GLSL Bromley GLSL Bottomley GLSL Hammer GLSL Bonne GLSL Boggs GLSL Berghaus GLSL Baker Transverse GLSL Baker GLSL August GLSL Airy GLSL Aitoff GLSL Armadillo GLSL Larrivée GLSL Cylindrical Equal-Area GLSL Azimuthal Equidistant GLSL Littrow GLSL Van Der Grinten GLSL Equirectangular GLSL Conic Conformal GLSL Conic Equidistant GLSL Albers GLSL Conic Equal-Area GLSL Equal Earth GLSL Times GLSL Wagner IV GLSL Wagner VI GLSL Wagner VII GLSL Wiechel GLSL Atlantis GLSL Mollweide GLSL Mercator GLSL Transverse Mercator GLSL Cordiform GLSL WebMercator to globe Versor zooming for Three.js Azimuthal Equal-Area GLSL Briesemeister GLSL Rectilinear GLSL Phytoplankton Danseiji projections Transverse Mollweide The 2D approximate Newton-Raphson method Inverting Lee’s Tetrahedral projection American Polyconic The complex logarithm projection Raster projection with GPU.js

H3 hexagons & geoContours

Modified Stereographic Projections Fisheye Conformal Map (Cox)Fisheye Conformal Map Fisheye Conformal Map (Tetrahedral)Reproject elevation tiles — world Transverse projections The Imago projection D3 Projections Imago Projection Distorsion Analysis EPSG:5530 Imago tiling Cordiform map projections 💛💗💖MultiPolygon clipping The Nicolosi Globular Projection Fisheye Globe Herbert Bayer’s Pacific Ocean The Behrmann projection Oronce Finé’s triangle projection Da Vinci’s octant projection The Lotus projection (1958)The Voronoi projection Using proj4js with D3 and Plot Murphey Butterfly Projection Equateur & tropiques Vega projections Mercator projection of a Mercator globe The truth about the Mercator projection Ocean-centric Mollweide projection Buckminster Fuller’s triangle transformation Experimental two world projections Tobler’s hyperelliptical projection (1973)Jacques Bertin’s projection (1953)A map without Antarctica (Bertin1953 projection)Square Root Azimuthal projection The Log-Azimuthal projection Peirce Quincuncial Projection, centered on the South Pole Translucent Earth (Satellite projection)Lee’s conformal projection in a tetrahedron Airocean projection Cubic projections Cox conformal projection in a triangle Icosahedral projections Dodecahedral projection The Cahill-Keyes projection (1975)Polyhedral projections with d3-geo-polygon Wagner customizable projection Parametrized Equal Earth Projection The Hufnagel projection system Tissot's indicatrix An equal-area projection for the cubic Earth Base map

Also listed in…

Geo

Tricontours

chart()

h3 = require("h3-js@3") // needs an update for v4, the API has changed

hexworld = level => ({

type: "FeatureCollection",

features: h3.getRes0Indexes()

.map(i => h3.h3ToChildren(i, level))

.flat()

.map(d => ({

type: "Feature",

properties: { id: d, pentagon: h3.h3IsPentagon(d) },

geometry: {

type: "Polygon",

coordinates: [h3.h3ToGeoBoundary(d, true).reverse()]

}

}))

})

hexagons = hexworld(1) // level 2 is fine, level 3 a bit slow… level 4 oh my

color = d3.scaleSequential(d3.interpolateCool)

projection = d3.geoAirocean()

.angle(-150)

.fitExtent([[2, 2], [width - 2, height - 2]], { type: "Sphere" })

contours = d3.geoContour().value(() => Math.random())(

hexagons.features.map(d3.geoCentroid)

)

function chart() {

const context = DOM.context2d(width, height),

path = d3.geoPath(projection).context(context);

context.beginPath();

path({ type: "Sphere" });

context.fillStyle = color(0);

context.fill();

context.lineWidth = 3;

context.stroke();

context.clip();

context.lineWidth = 0.5;

for (const c of contours) {

context.beginPath();

path(c);

context.strokeStyle = context.fillStyle = color(c.value);

context.fill();

context.stroke();

}

context.beginPath();

context.fillStyle = "orange";

for (const penta of hexagons.features.filter(d => d.properties.pentagon))

path(penta);

context.fill();

context.strokeStyle = "#fff";

context.beginPath();

path(land);

path(hexagons);

context.lineWidth = 0.5;

context.stroke();

context.strokeStyle = "black";

context.beginPath();

path(land);

context.lineWidth = 1.5;

context.stroke();

return context.canvas;

}

d3 = require("d3@7", "d3-geo-voronoi@2", "d3-geo-polygon@1")

land = {

const world = await fetch(

"https://cdn.jsdelivr.net/npm/visionscarto-world-atlas@0.1.0/world/110m.json"

).then((d) => d.json());

return topojson.feature(world, world.objects.countries);

}

height = width * 2.1

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.

Learn more