Satellite Projection Hebrides

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()`.

79% match

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.

76% match

Mercator projection

A map of Scotland uses a Mercator projection to display the country’s highlands and lowlands, with each region rendered as a blue SVG path. The d3.geo.mercator projection is configured with a custom center and scale, while d3.geo.path generates the geographic shapes from a GeoJSON file. Hovering over a path changes its fill color, and the visualization is accompanied by a brief historical paragraph about the Highlands.

CClevejones

75% match

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.

73% match

Floating Landmasses

An orthographic projection of the world appears as a rotating globe, with continents rendered as two concentric spheres to create a floating-landmass effect. Using d3.geo.orthographic and d3.geo.path with canvas, the code layers a blurred, semi-transparent land silhouette behind a crisper foreground, while a graticule grid rotates overhead. The land data comes from a TopoJSON world-110m file, and the animation is driven by d3.timer with changing projection scale and clip angles.

Mercator projection

This example displays a simple Mercator projection map of Scotland, rendered as black outlines on a white SVG canvas. It loads GeoJSON boundary data from an external file and draws each feature as a separate path element. The code uses D3 v3’s `d3.geo.mercator()` to define the projection, `d3.geo.path()` to generate the path data, and `d3.json()` to fetch the geographic data. The map is centered at longitude 0° and latitude 40°, with a scale relative to the 900×900 pixel viewport. No interaction or styling beyond the default fill is included.

CClevejones

Craster Parabolic

This example displays a world map projected using the Craster parabolic projection, with graticule lines, country boundaries, and landmasses rendered in SVG. The visualization uses d3.geo.craster from the d3.geo.projection.v0 library, along with d3.geo.path for geographic path generation and topojson.v1 to parse world-50m.json data. A sphere outline and fill are drawn first, followed by graticule and geographic features from the TopoJSON file, with styling applied via CSS classes.

Interactive Orthographic

This interactive orthographic map displays a world landmass that the viewer can rotate by moving the mouse. As the cursor moves, the projection’s center re-orients to the new longitude and latitude, redrawing the SVG paths in real time. Built with D3 v3, it uses `d3.geo.orthographic`, `d3.geo.path`, and a linear scale to map pixel coordinates to degrees. The geographic data comes from a TopoJSON file (`world-110m.json`) loaded via `d3.json`, with features extracted using `topojson.feature`.