Skip to main content
SimilarExport ZIP
100%

H3 Hexagons on a Globe

✓ Published2🌍 Public
CCurran Kelleher
Last edited Apr 28, 2025
Created on Aug 9, 2024

This example renders the 122 base cells of Uber’s H3 hexagon grid as polygons on an orthographic globe using d3-geoPath and h3-js. The five pentagonal cells are highlighted in translucent green, while the world’s countries, drawn from the visionscarto-world-atlas TopoJSON, appear in gray beneath a graticule. Canvas rendering supports drag-to-rotate and zoom-to-scale interactions, with state managed through a VizHub pattern.

AI-generated description

Unlocking h3-js for hexagons on a globe! Some of them are pentagons, which are highlighted in green.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hexagon Earth Interior Concept

This interactive visualization depicts Earth as a globe with a hexagonal inner structure, using the H3 hierarchical grid system to render pentagons and hexagons that appear to extend inward in concentric layers. An orthographic projection via `d3.geoOrthographic` and `d3.geoPath` draws the sphere and its countries from a TopoJSON world atlas, while the canvas context applies scaling transforms to create the illusion of depth. Users can drag to rotate the globe and zoom via the `drag` and `zoom` behaviors.

CCurran Kelleher
83% match
Loading thumbnail…

Colorful Flexagons

This interactive globe renders the world’s countries using D3’s geoOrthographic projection on a Canvas, layered with a graticule and a colorful overlay of the 122 base hexagons from Uber’s h3-js library. Each hexagon is stroked with a randomly generated color, creating a vibrant, flexagon-like pattern across the sphere. Users can drag to rotate the globe and zoom with the wheel, implemented via D3’s drag and zoom behaviors. Geographic data comes from the visionscarto-world-atlas TopoJSON source.

CCurran Kelleher
82% match
Loading thumbnail…

Hex map

This example renders a map of the world as a hexagonal grid using the `d3-hexgrid` library. The SVG output shows continents and country boundaries formed by hexagons, with a color scale distinguishing land from water. The visualization is built with React and uses D3’s hexbin mapping to project geographic coordinates onto hexagon cells, creating a stylized, low-resolution representation of global geography. The code initializes a 1960x800 SVG canvas and loads the hexgrid library via a CDN.

SSam de Man
74% match
Loading thumbnail…

Untitled

A globe projection of the world renders country polygons onto a Canvas element using `d3.geoPath` and `d3.geoOrthographic`. It displays land masses in dark blue, water in light gray, and a graticule overlay. The globe auto-rotates slowly, but dragging it with the mouse adjusts the projection angles, and hovering highlights a country in a different color while showing its name. The visualization loads world geography as TopoJSON from a remote source and country names from a TSV file, using `d3.geoGraticule10`, `d3.drag`, and the `versor` library for rotation calculations.

AAbhishek Singh
74% match
Loading thumbnail…

Rotating Globe

A rotating orthographic globe displays country boundaries and graticules, with land masses that change color on hover. The visualization uses D3 v5’s `geoOrthographic`, `geoPath`, and `geoGraticule` with a timer to continuously adjust the projection rotation. World map data comes from the World Atlas TopoJSON, while country names are loaded from a TSV file. Zooming is enabled via D3’s `zoom` behavior, and all rendering uses SVG paths.

Zzahra929
73% match
Loading thumbnail…

Untitled

An orthographic globe projects world landmasses and graticule onto a Canvas, with countries highlighted in red on hover and named in a header. The globe auto-rotates using a d3.timer, and users can drag to spin it via versor-based quaternion rotation, pausing rotation after interaction. Data comes from the world-atlas TopoJSON and a world-country-names TSV, rendered using d3.geoPath and d3.geoOrthographic within the d3-geo library.

DDolbyref113
73% match
Loading thumbnail…

Let's make a map with D3.js

This example displays a world map rendered as an SVG, with countries filled in green against a dark blue spherical backdrop. It fetches country boundaries from a TopoJSON file via the world-atlas dataset, then projects them using the Hufnagel projection from `d3-geo-projection`. The code builds paths with `d3.geoPath` and `d3.json`, styling the sphere and landmasses through CSS classes. It relies on D3 v5, TopoJSON’s `feature` method, and demonstrates a compact, data-driven mapping workflow.

JJames Malvern
73% match
Loading thumbnail…

D3 - Maps

A rotating orthographic globe displays world landmasses as stroked vector outlines on a Canvas element. D3’s `d3.geoOrthographic` projection and `d3.geoPath` render both the geographic features and a graticule, with the rotation updated by `projection.rotate` inside a `setInterval` loop. The geographic data comes from a remote TopoJSON-like GeoJSON file, while the animation runs on a 960×800 canvas.

SSubhendu Karmakar
73% match