Skip to main content
SimilarExport ZIP
100%

satellite projection

✓ Published0🌍 Public
LLuisSevillano
Last edited May 20, 2016
Created on May 19, 2016

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.

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

line between points w satellite projection

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.

LLuisSevillano
79% 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
75% 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
74% match
Loading thumbnail…

d3-composite-projections test

This example demonstrates an interactive map of Spain’s autonomous regions using the d3-composite-projections library to combine separate projections into a single visualization. It loads preprojected TopoJSON data from the es-atlas package and renders boundaries with `d3.geoPath`, while a dashed brown overlay marks the composite projection’s internal borders. As the user moves the mouse, the code uses `projection.invert` to display geographic coordinates and appends fading circles at each cursor position, using SVG transitions to shrink them. Points outside the valid projection area trigger an error message instead of drawing.

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

spanish provinces

A choropleth-style map of Spanish provinces rendered on a canvas, colored with a light yellow fill and gray borders, plus a dashed line marking the boundary between the Iberian Peninsula and the Canary Islands. The visualization uses a composite conic conformal projection handled by the custom `d3.geo.conicConformalSpain` function, with TopoJSON data presimplified via `topojson.presimplify`. It leverages `StaticCanvasMap` from the spam library to manage partial rendering and efficient spatial indexing through RBush. Boundaries are stroked with `CanvasRenderingContext2D`, and an interactive hover state is prepared for future mouse tracking.

LLuisSevillano
72% match
Loading thumbnail…

Gist 6245338

This visualization maps three Spanish cities as individual points on a geographic projection, with each point represented by a small dot. It uses a custom map projection and renders the GeoJSON features as a filled landmass, while the city markers are drawn as circles. The code relies on `d3.geoPath` to project and draw the map geometry, and `d3.forceSimulation` is not used here; instead, the points are placed directly at their projected coordinates. The canvas API (`getContext('2d')`) handles all rendering, and the map’s geographic boundaries come from the embedded `map.geojson` FeatureCollection.

PPhilippe Rivière
72% match