geoGringortenQuincuncial inverse, fixed

100%

geoGringortenQuincuncial inverse, fixed

✓ Published0🌍 Public

Last edited Apr 30, 2017

Created on Apr 30, 2017

This example tests the inverse projection of D3’s `geoGringortenQuincuncial`, marking points on a world map green when round-trip coordinates match and red when they fail. The map renders land and graticule via `d3.geoPath` with TopoJSON data, while a small grid of latitude-longitude pairs validates the inverse function. An orange marker follows the mouse, showing the projected location of the cursor’s inverted coordinates. The visualization uses d3-geo-projection and d3-geo with an SVG output, focusing on a specific bug fix for the projection’s inverse behavior.

AI-generated description

Green marks : inverse OK ; red marks : broken.

Research for d3-geo-projection issue #109.

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/0d90f05588907624ddfbc97e49ca8d3c'>geoGringortenQuincuncial inverse is broken [UNLISTED]</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

InterruptedSinuMollweide inverse projection

This example demonstrates the inverse of the InterruptedSinuMollweide projection, visually validating that the projection and its inverse accurately map points on a sphere. A grid of points is rendered in green when the forward and inverse projections agree, red when they disagree, and blue when inversion fails. The code uses d3-geo-projection's `d3.geoInterruptedSinuMollweide` and `d3.geoPath` to draw the graticule and world map from TopoJSON data. The inverse computation relies on `d3.geoSolve`, and the visualization is rendered as an SVG with interactive mouse tracking.

PPhilippe Rivière

79% match

Loading thumbnail…

Interrupted Homolosine

This example demonstrates D3’s `geoInterruptedHomolosine` projection by rendering a world map with landmasses, country boundaries, and a graticule. It also visualizes the inverse projection by moving a red marker to the geographic coordinates corresponding to the mouse position, using `projection.invert`. The map uses `d3.geoPath` with SVG, TopoJSON for world data, and `d3.geoGraticule`, clipped to a spherical outline. The projection is fitted to the viewport with `fitExtent`.

PPhilippe Rivière

74% match

Loading thumbnail…

visualizing map distortion d3v4

A side-by-side visualization demonstrates map projection distortion by pairing an interactive Aitoff projection with a fixed orthographic globe. The user can pan and zoom the left map via `d3.zoom`, while the right globe rotates to match the map’s center using `projection.invert` and `projection.rotate`. A grid of red dots, generated as screen coordinates, is overlaid on both views; on the map they appear directly, while on the globe their positions are computed through the inverse projection, revealing how distances and shapes stretch across different projections. The implementation uses `d3.geoPath`, `d3.geoGraticule`, `d3.geoProjection`, and TopoJSON world data, with SVG rendering.

PPhilippe Rivière

73% match

Loading thumbnail…

ChamberlinAfrica inverse projection

This example demonstrates the ChamberlinAfrica projection and its inverse, which converts projected coordinates back to geographic latitude and longitude. It overlays a graticule, land masses, and boundary lines on a sphere rendered via SVG. The inverse is computed using the Newton-Raphson method on cartesian coordinates when no native `invert` function exists. The code uses d3.geoChamberlinAfrica, d3.geoPath, d3.geoGraticule, and TopoJSON data, with a color-coded grid validating the inversion accuracy and an interactive marker showing mouse position inversion.

PPhilippe Rivière

72% match

Loading thumbnail…

Peirce Quincuncial

This example shows the Peirce quincuncial projection, a conformal map that projects the globe onto a square using a complex algorithm. The visualization displays world landmasses in dark gray with white country boundaries, overlaid on a graticule of meridians and parallels, all within a 960-pixel SVG. The code uses `d3.geoPierceQuincuncial()` from the d3-geo-projection library to define the projection, and `d3.geoPath()` to render the projected geometry. It loads world data from a TopoJSON file, specifically via `topojson.feature` for land and `topojson.mesh` for country boundaries. The sphere is outlined in black, and the rendering is handled with SVG paths.

Mmbostock

71% match

Loading thumbnail…

Gringorten Equal-Area

This example demonstrates the Gringorten equal-area projection, a map projection that preserves area while arranging the continents in an unusual, diamond-like layout. The visualization renders world landmasses in dark gray with white country boundaries against a graticule grid, all framed within a sphere outline. The code uses the `d3.geoGringorten` projection from the d3-geo-projection library, combined with `d3.geoPath` for rendering geographic data. World map data is loaded from a 50m resolution GeoJSON file via `d3.json`, and the graticule is generated using `d3.geoGraticule`. The SVG output is styled with CSS for the graticule, land, and boundary features.

Mmbostock

71% match

Loading thumbnail…

AlbersUSA inverse proj parameters

This block demonstrates the inverse projection parameters of a modified AlbersUSA projection that includes Puerto Rico, answering a D3.js issue. It renders a U.S. map with red and green guide lines and rectangles marking the boundaries of each sub-projection’s clip extents within the composite projection’s coordinate space. The code uses `d3.geoAlbers`, `d3.geoConicEqualArea`, `d3.geoPath`, and `d3.geoGraticule` with SVG output. It overlays graticules, a sphere outline, and a red center point, while the map mesh comes from TopoJSON data.

PPhilippe Rivière

70% match

Loading thumbnail…

TEST

An interactive orthographic globe displays graticule lines, a red rectangular arc region, and a sphere outline, with a hidden world map loaded for future rendering. Users drag to rotate the projection via `d3.drag`, adjusting the rotation with `projection.rotate`, and zoom using `d3.zoom` to transform the SVG group. The visualization uses `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule`, fetching TopoJSON from the world-atlas package, while styling SVG paths with CSS classes for the sphere, graticule, and rectangle.

FFlash

70% match