Colorful Flexagons

100%

Colorful Flexagons

✓ Published0🌍 Public

Last edited Aug 9, 2024

Created on Aug 9, 2024

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.

AI-generated description

Unlocking h3-js for hexagons on a globe!

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

82% 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

81% match

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

81% 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

80% 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

79% match

Loading thumbnail…

World Tour

This visualization presents an animated orthographic globe that cycles through the world’s countries, highlighting each one in red while rotating to center it on screen. The display shows the country name above the globe as it transitions between nations. The code uses D3.js v3 for transitions and tweens, TopoJSON for world map data, and a Canvas 2D context for rendering. A queue loads GeoJSON topology and country name mappings, while d3.geo.path draws land, borders, and the globe sphere with dynamic rotation.

AAjar06

79% match

Loading thumbnail…

Globe project

This globe visualization, rendered with D3 v4 and Three.js, presents an interactive Earth with countries, graticules, and labeled points of interest. Built from a fork of earthjs’s block, it combines SVG, canvas, and WebGL for smooth rotation and zoom, with hover tooltips for countries and dots. A subtle gradient ocean and interactive land paths highlight geographic features, while CSS transitions provide visual feedback on hover.

EEPBAH

79% match

Loading thumbnail…

Zoomable Globe with Cities on Canvas

This example presents an interactive, zoomable world globe rendered on an HTML5 Canvas. It visualizes a dataset of global cities, dynamically labeling them based on population and current zoom level. Users can pan the globe via drag and zoom with the scroll wheel, with the projection updating for a smooth experience. The visualization uses D3.js modules including `d3.geoOrthographic`, `d3.geoGraticule`, and `d3.geoPath` for map rendering, and an R-Tree for efficient label placement. Country boundaries and city data come from external JSON and CSV sources.

CCurran Kelleher

78% match