Bro what the hell is this even

100%

Bro what the hell is this even

• Draft1🔗 Unlisted

Last edited Aug 10, 2024

Created on Aug 10, 2024

An interactive orthographic globe visualizes world countries overlaid with the hexagonal grid of H3 base cells. Built with d3.geoOrthographic and d3.geoPath, it renders to a Canvas, using topojson-client to parse the world atlas topology. Dragging rotates the sphere, while zooming scales the projection, and pentagonal H3 cells are highlighted with a secondary fill.

AI-generated description

Crazy bug yo

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

85% match

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

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

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

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

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

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…

Untitled

This interactive orthographic globe displays world landmasses, graticules, and city labels with mouse-controlled rotation. It uses D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path` to render SVG, with TopoJSON world-110m data for land. A `places.json` dataset adds point markers and text labels for cities like San Francisco and Kiev. Radial gradients simulate ocean shading, a drop shadow, and globe highlight, while mouse drag rotates the projection and reposition labels.

KKikkolatsch

79% match