Skip to main content
SimilarExport ZIP
100%

Hexagon Earth Interior Concept

✓ Published0🌍 Public
CCurran Kelleher
Last edited Aug 12, 2024
Created on Aug 10, 2024

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.

AI-generated description

What if the inside of the Earth were hexagons all the way down?

MIT Licensed

Similar vizzes

Loading thumbnail…

H3 Hexagons on a Globe

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.

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
81% match
Loading thumbnail…

Hexagon Mesh

This interactive visualization displays a mesh of hexagons that users can paint by clicking and dragging with the mouse. A black outline dynamically traces the boundary between filled and unfilled hexagons. The grid is generated on the fly using TopoJSON's geometry data structures, transformed through a custom D3 geo projection to create regular hexagon shapes. The boundary outlines are computed using the `topojson.mesh` API with a filter that identifies edges separating filled from empty cells, rendered as SVG paths via `d3.geo.path`.

Mmbostock
76% match
Loading thumbnail…

Earth globe - v4

An interactive SVG globe renders world landmasses and oceans using an orthographic projection via `d3.geoPath`. Users can drag to rotate the sphere, and hovering over any country displays its name in a tooltip, with the hovered land turning green. A dropdown menu of countries triggers a smooth `d3.transition` animation that reorients the globe to center the selected nation, while `d3.geoCentroid` calculates the target coordinates. The visualization is built with D3 v4 and processes geographic data from TopoJSON and TSV files.

QQ-Zhao
76% match
Loading thumbnail…

Orthographic Zoom III

This interactive globe displays country boundaries using an orthographic projection, panning and zooming smoothly with the mouse. During interaction, it renders the lower-resolution 110m world-atlas dataset, then switches to the higher-resolution 50m dataset once the motion stops for crisp detail. Built with D3 v4, it uses `d3.geoPath` and TopoJSON to project geographic features, with drag and zoom behaviors from `d3.drag` and `d3.zoom` controlling the globe's rotation and scale.

CCurran Kelleher
75% match
Loading thumbnail…

Translucent Earth

This example visualizes Earth as a translucent globe, showing both the front and back hemispheres simultaneously. It uses a custom orthographic backprojection to render the far side of the planet’s landmasses through the sphere, creating a see-through effect. The animation continuously rotates the globe via `d3.timer`, while user drag interaction is enabled through `d3.geoInertiaDrag`. Land data comes from the `world-atlas` TopoJSON, drawn on Canvas with `d3.geoPath` and `d3.geoOrthographic` projection, including graticules and sphere outlines.

PPhilippe Rivière
75% match
Loading thumbnail…

Earth globe

An interactive orthographic globe renders world countries as SVG paths using D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path`, with land polygons from a TopoJSON `world-110m.json` file. Users can drag to rotate the globe via `d3.behavior.drag`, which adjusts the projection’s rotation, while hovering over a country displays its name in a tooltip. A dropdown menu, populated from a TSV file of country names, lets users select a country; the globe then smoothly animates to center on that country’s centroid using a `d3.transition` with an interpolated rotation, and the selected country is highlighted in green.

KKoGor
75% 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