line between points w satellite projection

100%

line between points w satellite projection

✓ Published0🌍 Public

Last edited Sep 25, 2016

Created on May 20, 2016

A satellite projection renders the Earth from an angled, tilted viewpoint, with graticule lines, country borders, and urban areas drawn from Natural Earth data via TopoJSON. A dashed red quadratic curve connects projected city markers for Paris and Rome, both plotted as points over the map. The visualization uses D3.js and the d3.geo.satellite projection from the d3-geo-projection plugin, with features painted onto a continuously rendered canvas.

AI-generated description

Inspired by Mike Bostock's satellite projection. Urban areas and coastline data by naturalearthdata

mit Licensed

Similar vizzes

Loading thumbnail…

satellite projection w graticule

This interactive visualization projects a view of Earth from a satellite, centered on Europe and North Africa, with a graticule grid overlaid. It uses `d3.geo.satellite()` to define the projection and renders map data onto a canvas via the StaticCanvasMap. The map displays Natural Earth coastline, Spanish provinces, and urban areas as separate layers, painting features dynamically with the spam library. A marker and label for Madrid are also projected and drawn on the map.

LLuisSevillano

80% match

Loading thumbnail…

satellite projection

A satellite projection shows Earth as seen from an orbiting spacecraft, with the Iberian Peninsula centered on a curved horizon. The map layers Spanish coastline, provincial boundaries, and urban areas, rendered with a soft glow and a highlighted marker for Madrid. Built with D3.js and the `d3.geo.satellite` projection, the visualization uses canvas-based rendering for efficient drawing. Geographic data comes from Natural Earth, processed with TopoJSON, while a spatial index (RBush) accelerates feature lookup during rendering.

LLuisSevillano

79% match

Loading thumbnail…

Satellite Projection

This example shows a satellite projection of the United States, with a graticule overlay and land boundaries rendered as SVG paths. The projection is created with `d3.geo.satellite()`, configured with a distance, scale, rotation, center, and tilt to simulate a view from space. The graticule is generated using `d3.geo.graticule()` and the map data is loaded from an external JSON file via `d3.json`. The code uses `d3.geo.path()` with the projection to draw both the graticule and the land polygons, which are converted from TopoJSON using `topojson.feature()`.

Mmbostock

76% match

Loading thumbnail…

Satellite

This visualization shows a rotating globe with a graticule and sphere outline from the perspective of a satellite orbiting Earth. The animation continuously adjusts the camera tilt and rotation, creating a dynamic view of the planet’s surface. It uses the D3.js graphics pipeline with `d3.geo.satellite` for projection, `d3.geo.clipCircle` for visibility clipping, and the Canvas API for rendering. The data source is a graticule and sphere generated on the fly, with real-time animation driven by a timer and elapsed time.

Mmbostock

73% match

Loading thumbnail…

Satellite Projection Test

A tilted perspective satellite projection of the eastern seaboard, viewed from above Newburg, N.Y., overlays a red 1° graticule on a scanned reference map. The code uses d3.geo.satellite() with custom distance, rotation, and tilt parameters, and manually offsets the projection to align the graticule with the map image. It renders the graticule as an SVG path via d3.geo.path(), using d3.geo.graticule() to define the extent. The background image is loaded from a local readme.png file, and the graticule is clipped to a small area around the reference coordinates.

Mmbostock

73% match

Loading thumbnail…

Points on a Map

This example displays global city locations as semi-transparent circles on a natural Earth map projection. It renders the world using `geoPath` and `geoNaturalEarth1` from d3-geo, with graticules and country interiors overlaid via TopoJSON world atlas data. City coordinates are projected from latitude/longitude pairs using the same projection, drawing each point as an SVG circle. The data comes from the Data Canvas Sense Your City Dataset, loaded through d3.csv, with React managing the component state and SVG rendering.

MMichael Bergerson

71% match

Loading thumbnail…

Satellite Projection Hebrides

A satellite projection of the Hebrides islands displays land, rivers, and lakes in muted greens and blues, rotating slowly to simulate an orbital view. The map redraws its geographic features as the mouse moves, adjusting latitude and longitude to follow the cursor. Built with D3.js and the d3-geo-projection library, it uses `d3.geoSatellite`, `d3.geoPath`, and TopoJSON data for vectors. The visualization updates paths dynamically, rendering SVG shapes with animation when idle.

PPhilippe Rivière

71% match

Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example demonstrates how latitude and longitude coordinates from a world GeoJSON file are projected onto an SVG canvas using a custom cylindrical map projection, with red circles marking London and San Francisco. Built with D3.js version 3.5.5, the code uses `d3.geo.projection` to define the cylindrical transformation and `d3.geo.path` to render the world map from the 110m-resolution GeoJSON data. The `projection([0,52])` and `projection([-122.4194,37.7749])` calls place the two cities, while the commented-out alternative projections (Mercator and azimuthal equidistant) show the flexibility of the approach.

KKristinHenry

71% match