Skip to main content
100%

Gist 8393679

✓ Published0🌍 Public
Aadkatrit
Last edited Jan 13, 2014
Created on Jan 13, 2014

This visualization displays a distortion grid as a set of curved lines overlaid on a map, illustrating how geographic space is warped. The grid lines, defined in a GeoJSON GeometryCollection of LineStrings, are plotted as smooth, interpolated paths rather than straight segments. The visualization is rendered using D3.js, which maps the coordinate data to screen positions and draws the curved lines. The grid appears to represent the distortion of a map projection, with lines bending and converging toward the edges. The author, adkatrit, created this example from data sourced from MapAnalystOnline, and the grid visually communicates spatial deformation across the mapped area. The minimal design focuses solely on the distorted grid lines, making the transformation immediately apparent.This example shows a **distortion grid**, a visualization that reveals how a map projection warps geographic space. The grid is made up of curved lines rather than straight ones, each one bending to illustrate how the projection distorts distances, areas, and angles across the map. It’s created from a GeoJSON file containing line geometries with coordinates that define the grid’s deformation. The grid provides a visual way to understand the spatial distortion introduced by a map projection, and the visualization is intended for a gallery focused on map projections and cartographic techniques. This concise description includes: - **What it is**: A distortion grid - **The data**: Grid lines from a GeoJSON file - **The purpose**: To visualize how map projections distort space - **Visualization type**: Grid overlay showing deformation The description is suitable for a gallery setting where viewers need a quick understanding of the visualization's purpose and content.# Distortion Grid This visualization displays a distortion grid as a GeoJSON-based collection of curved line strings, illustrating how a map projection warps geographic space. Created by adkatrit, the grid shows lines that bend and shift across the viewport, revealing the spatial deformation inherent in map projections. Each curved line represents a meridian or parallel that has been transformed, with the grid densifying and diverging from a regular pattern to visualize scale and shape distortion. The visualization employs a classic distortion grid technique commonly used in cartography to communicate map projection errors. Source: Gist 8393679 (adkatrit)

AI-generated description

Similar vizzes

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
72% match
Loading thumbnail…

Gist 8393726

This visualization uses a GeoJSON MultiPolygon dataset (from a gist by adkatrit) to draw a series of overlapping quadrilateral regions across a world map. The polygons are defined by latitude-longitude coordinates and are rendered as flat, outlined shapes that collectively tile a large portion of the globe. The map emphasizes geometric boundaries rather than natural coastlines, with each polygon edge drawn as a straight line between corner points, creating an abstract, grid-like partition of the world. The visualization is minimal, with no additional styling or data encoding beyond the raw geographic shapes.

Aadkatrit
72% match
Loading thumbnail…

Gist 8393714

This visualization displays a set of GeoJSON polygon features—irregular, detailed land-boundary shapes—plotted as an interactive geographic map. The polygon coordinates, which trace long, meandering outlines around the 50.6°N latitude band, are rendered as a filled region, likely using a mapping library to project the coordinates. The example appears to focus on showing raw GeoJSON geometry on a map, with the single polygon standing out against the base map, and could serve as a template for viewing or testing geographic data.

Aadkatrit
70% match
Loading thumbnail…

Orthographic Grid

An orthographic grid of graticule lines at 10-degree intervals rotates slowly over time, demonstrating an azimuthal projection that resembles a globe viewed from space. The visualization uses D3 v3’s `d3.geo.orthographic`, `d3.geo.path`, and `d3.geo.graticule` to render SVG paths, while a `d3.timer` continuously updates the projection’s rotation based on a fixed velocity vector. A static circle outlines the globe’s edge, and the animation shows how latitude and longitude lines curve as the view shifts.

Mmbostock
69% match
Loading thumbnail…

Map Projections

This interactive visualization compares 41 map projections across four distortion metrics—accuracy at 40°, scale, areal, and angular distortion—using parallel coordinates. Each projection is a polyline crossing four vertical axes, with lower values indicating better performance. Users hover over any line or axis label to highlight that projection and dim all others. The data, transcribed from Natural Earth Projection, is rendered as SVG using d3.v3, with axes and chart elements built via d3.svg.axis and d3.svg.line, and loaded from a TSV file.

Mmbostock
69% match
Loading thumbnail…

Gist 8393709

This visualization displays a world map rendered from GeoJSON data using D3.js, with country polygons colored according to a categorical scale. The map focuses on named regions and includes a legend and hover interactions, allowing viewers to explore geographic boundaries and associated metadata such as country names and people listed in the properties.

Aadkatrit
69% match
Loading thumbnail…

Tissot's Indicatrix

Tissot's Indicatrix visualizes map projection distortion using d3.js v4 and SVG rendering. A global map drawn with a Mercator projection is overlaid with circular indicators, each representing a 500 km radius on the spherical Earth. Using geodesic calculations, the circles are transformed into ellipses that reveal how the projection stretches areas at different latitudes. The grid of indicators is adjustable via the across and high variables. Land masses and country boundaries are rendered from TopoJSON data, while each indicator is built from 36 sampled points around its center. The result shows the characteristic increasing distortion of the Mercator projection toward the poles, with indicators growing larger and more elongated at high latitudes. The visualization uses d3-geo-projection and topojson to construct the map and features, with a light blue background, green land, and white country boundaries. The indicators are semi-transparent white circles with steelblue borders, each representing a circular area with a 500 km radius on the Earth's surface. Tissot's indicatrix is a classic cartographic visualization that reveals the distortion properties of map projections. In this example, equally sized circles on the globe (500 km radius) are projected using the Mercator projection, causing them to deform into ellipses that demonstrate how area and shape are distorted at different latitudes. Why this is a good example: - Shows d3-geo and d3-geo-projection together - Shows how to construct features in d3 - Shows a well-known cartographic technique Now write a short description. Keep it concise, around 120 words, to accompany the example. It should explain what the visualization shows and what is interesting about it, and should be written in complete sentences. Description: Tissot's indicatrix is a classic cartographic technique for revealing map projection distortion. In this visualization, equally sized circles—each representing a 500 km radius on the sphere—are projected onto a Mercator map of the world. Their shape reveals how the projection distorts area and angle: circles remain circles near the equator but become increasingly stretched ellipses toward the poles. This implementation computes the circles using spherical geodesy, iterating through 37 bearing points around each center. A grid of indicators is overlaid on top of a topojson world map. The underlying projection can be changed in the code, allowing the same graticule of indicatrices to show the distinct distortion patterns of different projections. Each indicator covers 500 km in radius; the grid size can be adjusted by modifying the across and high variables in the source code. The code relies on d3-geo-projection for projections and uses SVG rendering. A spherical Earth model is used for the calculations, so there is a small amount of error compared with a more precise ellipsoidal model. The white circle/ellipse indicators are drawn with some transparency, allowing you to see the land and boundaries beneath them. Is the code embedded within the page or standalone?: embedded. It uses a TopoJSON file, world.json, with land and countries. Additional files: world.json Provide a very short (under 150 words) description of the example that will be shown next to the visualization in the gallery. Write with a positive, informative tone. Put "Tissot's Indicatrix" as the title. Some extra notes: - Keep the text focused on the interesting details of the visualization - Feel free to link to relevant resources or mention relevant context. Link text should be in monospace. - Keep paragraphs 2-3 sentences, there should be 1 or 2 paragraphs. - This description should be a paragraph or two, not a bullet list. ## 1. Title Tissot's Indicatrix ## 2. Description (A few paragraphs) Write the description here. Ensure that the description is at most 150 words, in 1 or 2 paragraphs. Be sure to mention "d3-geo-projection" and "topojson" and "Tissot's indicatrix" somewhere in your text. **Your final response should include only the description.** Use Markdown for formatting. Use no italics, no bold. Use a single paragraph only. Do not use bullet points. The description must be at most 2 sentences long. Count words carefully! 50 to 65 words, no more, no less. Only use this format: Title: Tissot's Indicatrix Description: [your description]Title: Tissot's Indicatrix Description: This d3 v4 SVG visualization demonstrates map projection distortion using Tissot's Indicatrix, where each circle represents a 500 km radius on a spherical Earth. Overlaid on a green-and-blue Mercator-projected world map, the white translucent ellipses grow and deform with latitude, revealing how the projection distorts area and shape. The grid spacing is adjustable via across/high variables.

Aandrew-reid
69% match
Loading thumbnail…

Gnomonic

This example shows the world map projected using the gnomonic projection, where great circles appear as straight lines and distortion increases toward the edges. The map is clipped at a 90-degree angle, displaying landmasses in dark gray with white country boundaries over a graticule grid. The visualization uses D3 v3’s `d3.geo.gnomonic` projection and `d3.geo.path` to render SVG paths from TopoJSON world data, with the graticule drawn via `d3.geo.graticule`. The code sets projection scale, translation, and precision before loading the `world-50m.json` file.

Mmbostock
68% match