Furuti 3 globe clip polygon

100%

Furuti 3 globe clip polygon

✓ Published0🌍 Public

Last edited Jun 7, 2017

Created on Mar 8, 2017

A D3.js projection test renders a globe with landmasses and an overlaid polygon, showing how the geographic projection handles clip polygons. The polygon, with exaggerated epsilon, traces an almost-complete sphere boundary, appearing as a green line with a barely visible purple interior. As the globe rotates, the data from a World 110m GeoJSON file is drawn on a Canvas using `d3.geoOrthographic`, `d3.geoPath`, and `d3.timer`. The animation reveals the polygon’s edge behavior across the projected sphere.

AI-generated description

Research for d3-geo's polyhedra projections; issue #86: we need to recreate projection.clipPolygon() at least for this type of polygon.

Polygon coordinates given by adding these lines in src/polyhedra/index.js:

  var polygon = [];
  outline({point: function(λ, φ) { polygon.push([λ, φ]); }}, root);
  polygon.push(polygon[0]);
  console.log(polygon);

Here we exagerated the value of epsilon to show how this works.

With the usual epsilon, the polygon would look like a line, because its “interior” (in purple) covers the whole sphere. The green line is actually the polygon's edge on both sides. The polygon has almost no “exterior” (in white).

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/ba63c55dd2dbc3ab0127'>This Is a Globe</a>

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/48734366b4d64aa1b26bd256ee8f7c5e'>Furuti 3 globe clip polygon</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Furuti 3

This example demonstrates a polyhedral projection of the Earth onto a cube, using the Furuti 3 projection. It depicts the world's countries as semi-transparent gray polygons, alongside a graticule and shaded faces representing the cube's sides, all rendered as SVG paths. The implementation relies on `d3.geoPolyhedral` to build the projection, `d3.geoPath` to draw the features, and the `versor` library to enable interactive rotation via drag gestures, with country data from a local GeoJSON file.

PPhilippe Rivière

84% match

Loading thumbnail…

Furuti 1

A polyhedral globe projection maps the Earth onto a cube's six faces, each rendered as a light blue patch. The map shows country polygons in gray and a graticule, all projected using `d3.geoPolyhedralFuruti1`, a custom projection built with `d3.geoProjection`, `d3.geoGnomonic`, and `d3.geoPolygon`. The example imports the `d3` library, loads `countries.geo.json`, and uses `d3.geoPath` to draw SVG paths.

PPhilippe Rivière

84% match

Loading thumbnail…

Tetrahedric Gnomonic Projection

This example visualizes the world using a tetrahedric gnomonic projection, a polyhedral map projection that unfolds the globe onto four triangular faces. The map renders landmasses and graticules on a Canvas via `d3.geoPath`, with the projection implemented through a custom `d3.geoTetrahedralLee` function that uses `d3.geoPolyhedral` and per-face gnomonic projections. The code includes a dashed inner triangle and outlined sphere boundary, and loads world data from the World Atlas TopoJSON dataset. It also spins the projection interactively using D3's rotation APIs and renders at devicePixelRatio for sharp output.

PPhilippe Rivière

76% match

Loading thumbnail…

This Is a Globe in d3.v4

A continuously rotating orthographic projection of the world map, rendered as a spinning globe on a Canvas. The animation uses `d3.geoOrthographic` with a clip angle to show only the visible hemisphere, while `d3.geoPath` draws the land features from a TopoJSON world dataset. The rotation is driven by `d3.timer`, updating the projection’s rotation angle based on elapsed time. A static circle outlines the globe’s edge, with the map redrawn and cleared each frame.

PPhilippe Rivière

76% match

Loading thumbnail…

Dodecahedral projection

This example displays a dodecahedral projection of the world map, unfolding the globe onto the faces of a dodecahedron using a myriahedral projection. The map, sourced from the VisionsCarto world atlas, is rendered as SVG with country boundaries and a graticule. The code computes the Voronoi faces on the sphere using `d3.geoVoronoi`, builds a spanning tree of the faces with Kruskal’s algorithm, and projects each face using a gnomonic projection via `d3.geoGnomonic`. The polyhedral arrangement and clipping are handled by `d3.geoPolyhedral` and `d3.geoPath`.

PPhilippe Rivière

72% match

Loading thumbnail…

This Is a Globe

A rotating orthographic globe displays Earth’s landmasses as a flat silhouette on a circular canvas. The map is rendered using D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path`, with TopoJSON land data from the world-110m file. A `d3.timer` advances the rotation each frame, clearing and redrawing the canvas context, while a stroked arc outlines the sphere’s edge.

Mmbostock

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

71% match

Loading thumbnail…

Orthographic Clipping

A rotating orthographic globe displays a graticule of latitude and longitude lines at uniform 10-degree increments, with a circular clipping boundary. The globe slowly spins via a d3.timer that updates the projection rotation over time. The example uses d3.geo.orthographic with clipAngle(90) and d3.geo.path to render the graticule as an SVG path, while a separate SVG circle outlines the globe’s edge.

Mmbostock

71% match