Furuti 1

100%

✓ Published0🌍 Public

Last edited Oct 1, 2017

Created on Aug 5, 2017

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.

AI-generated description

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

Based on "Earth in a Cube" by Enrico Spinielli and on my 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.

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/cb7930254c9e7062114678d62d9be5ac'>Furuti 3 - projection.clipPolygon()</a>

mit 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

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…

Let's make a big face!

A world map is displayed on a blue sphere, with country polygons filled in light green and outlined in black. The visualization demonstrates basic D3.js DOM manipulation by appending SVG paths to represent the Earth’s landmasses. Using the `d3.json` loader, `d3.geoPath`, and `d3.geoNaturalEarth1` projection, the code processes `final110countries.json` TopoJSON data, converts it to GeoJSON features via the `topojson` library’s `feature` function, and renders them as SVG paths.

BBystander1

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

73% match

Loading thumbnail…

Basic Map with D3

This example displays a world map using an SVG projection, with countries filled in green and the surrounding sphere rendered in turquoise. It uses the d3.geoPath and d3.geoNaturalEarth1 projection APIs from D3 v5, along with the topojson feature function to extract country boundaries from the world-atlas 110m dataset. The map renders by appending SVG path elements for each country, with a sphere outline drawn first to shape the background.

FFhouston17

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

73% match