Furuti 3

100%

✓ Published0🌍 Public

Last edited Oct 1, 2017

Created on Jul 23, 2017

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.

AI-generated description

Carlos Furuti's cubic globe #3 - http://www.progonos.com/furuti/MapProj/Normal/ProjPoly/projPoly2.html

Research for d3-geo-projection/pull/86 and d3-geo/issues/46.

Re-incorporating Jason Davies’ clipPolygon() code into d3v4.

Code base at Fil/d3-geo:clip-polygon.

mit Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Furuti 3 globe clip polygon

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.

PPhilippe Rivière

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

77% 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…

Mercator Projection

This example displays a world map using a Mercator projection, with each country rendered as a gray shape outlined in white. The map is built with the D3.js version 3 library, using `d3.geo.mercator()` to define the projection and `d3.geo.path()` to convert GeoJSON geometries into SVG paths. The geographical data comes from a `countries.json` file containing feature collections loaded via `d3.json()`. The resulting visualization, rendered in an SVG element, demonstrates the classic distortion of landmasses toward the poles inherent to this projection method.

PPatrick Wojda

75% match

Loading thumbnail…

Let's make a map with D3.js!

This example visualizes the world’s countries as filled polygons on a natural Earth projection, with oceans rendered in blue and landmasses in light green. It uses D3.js v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while TopoJSON’s `feature` function extracts country boundaries from a 110m world-atlas GeoJSON dataset. The code draws a sphere background and then overlays each country’s path, applying thin black strokes for borders.

AAdrian Herzog

74% match

Loading thumbnail…

Let's make a face with D3.js!

This example displays a natural Earth projection of the world map, with countries rendered as orange paths on a steel-blue sphere. It uses D3.js v5’s `geoNaturalEarth1` and `geoPath` to generate the geographic outlines, while TopoJSON’s `feature` extracts country boundaries from the world-atlas dataset. The SVG paths are appended asynchronously after fetching the 110m resolution TopoJSON file. A black stroke with low opacity outlines each country, and the page sets no margins to let the visualization fill the entire viewport.

DDifan Gu

74% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a natural Earth projection of the world, with countries rendered as light green polygons on a blue sphere. The visualization uses D3.js v5 and the topojson library to convert geographic data from the world-atlas package into SVG paths. The code employs d3.geoPath with d3.geoNaturalEarth1 for the projection, and the topojson feature function to extract country boundaries from the TopoJSON source. A semi-transparent black stroke outlines each country, while the sphere’s fill is set via the CSS class.

Wwakgari

74% match