Skip to main content
100%

Moon Color Hillshade Tileset

✓ Published0🌍 Public
Aandrew-reid
Last edited Feb 4, 2019
Created on Feb 4, 2019

This visualization displays a slippy map of the Moon using a custom hillshade tileset, rendered as SVG with D3 v4. The map uses a Mercator projection and supports interactive pan and zoom, with tile depth computed from the zoom level. The tiles are loaded from a custom tile server, while the d3-slippy plugin handles projection, tile wrapping, and zoom constraints. The view shows lunar terrain rendered as hillshaded tiles, demonstrating how a geographic tileset can be applied to non-Earth surfaces with D3's geo and zoom capabilities.

AI-generated description

A custom hillshade tile set of the moon. Data is from a 118m hillshade, reprojected, resampled, and converted to tile form with tilemill. Tiles are placed with d3-slippy.

Similar vizzes

Loading thumbnail…

d3 geographic tile sets

This example demonstrates a tile-based geographic visualization built with D3 v4, using the d3-slippy module to load and display web map tiles. The visualization cycles through multiple built-in tile sets, rendering them as SVG image tiles within a Mercator projection. It supports pan and zoom interactions, with tile depth automatically calculated from the zoom transform, and includes configurable zoom limits, tile wrapping, and source attribution. The implementation handles tile positioning for both standard cylindrical projections and attempts to address non-cylindrical tile sets, though some tilesets exhibit issues at certain zoom levels or regions. The example is rendered entirely in SVG and includes animated transitions between tile sets.

Aandrew-reid
76% match
Loading thumbnail…

D3-slippy map with canvas tiles

This example demonstrates a slippy map implemented with D3 v4, using canvas rendering for efficient display of OpenStreetMap tiles. The custom `d3.geoSlippy` projection wraps d3.geoMercator and integrates with d3.zoom to enable panning and zooming with proper tile loading and wrapping. Tiles are drawn directly onto a 960×960 canvas, with zoom constraints and tile depth calculated dynamically from the current transform. The map supports interactive pan and zoom while maintaining geographic accuracy through the Mercator projection.

Aandrew-reid
75% match
Loading thumbnail…

Moon

A circular moon rendered in black and white rotates across the screen, with a dark cratered sphere against a pitch-black background. The visualization uses D3 v4’s `d3.geoOrthographic` projection and `d3.geoPath` to draw the moon as a geographic circle, while `d3.timer` drives an animation that shifts the circle’s center over time, simulating rotation. Two SVG paths—one for the moon’s body and one for its background—are updated each frame. The code defines no external data source, instead generating the shape procedurally with `d3.geoCircle`.

CCurran Kelleher
71% match
Loading thumbnail…

Map Tiles in D3

This interactive map demo, animated with D3, shows map tiles being loaded and positioned as users progressively zoom and pan. It provides a proof-of-concept for tile-based mapping using only D3, avoiding dedicated map libraries. The visualization fetches OpenStreetMap tiles from MapQuest’s tile server, addressing them by column, row, and zoom level. The animation uses D3's selection and transition methods, applying CSS 3D transforms via `matrixString` for smooth scaling, and manages a request queue for efficient image loading. The code demonstrates DOM manipulation and coordinate logic borrowed from Modest Maps, with a fallback to standard CSS transforms.

RRandomEtc
71% match
Loading thumbnail…

SVG slippy map using Viewbox with D3

An interactive slippy map displays CloudMade tiles inside an SVG element, with D3.js managing tile loading and viewBox coordinates. Panning and zooming manipulate the SVG viewBox directly, keeping tile coordinates static. The svg_interact module handles mouse events and wheel zoom, while svg_map calculates visible tiles and fetches them as raster images via CloudMade's tile API. The map supports continuous zoom levels and only renders tiles within the current viewport.

ZZJONSSON
71% match
Loading thumbnail…

d3-slippy: Constraining Zoom/Pan

This example demonstrates a slippy map interface built with d3-slippy, a custom D3 v4 plugin that constrains zoom and pan to geographic limits. The map displays OpenStreetMap tiles with Mercator projection, allowing users to pan and zoom while restricting the view to valid world coordinates and tile zoom levels (between 4 and 13). A yellow polygon overlaid on the map shows a region in Uruguay, highlighting how the projection and zoom transforms interact with geographic features. The visualization uses SVG rendering and includes tile wrapping and attribution for OpenStreetMap contributors.

Aandrew-reid
70% match
Loading thumbnail…

Slippy map + extent indicator

The visualization combines a full-screen slippy map with a small inset globe that shows the current map extent. The globe uses an orthographic projection with radial gradients to create a shaded, three-dimensional appearance, while the main map displays Stamen tiles with an overlaid semi-transparent polygon indicating the visible region. Built with D3 v3, the example uses d3.geo.orthographic, d3.geo.path, and d3.geo.graticule, and loads world land and country boundaries from TopoJSON files, with city points from a GeoJSON places file.

FFrissAnalytics
70% match
Loading thumbnail…

Moon Calendar 2017

A 2017 moon calendar renders each day as a small orthographic projection of the Moon, showing its phase across the year in a grid of months and days. Clicking the visualization highlights the current day with an animated red ring. Built with D3 v4, it uses `d3.geoPath` and `d3.geoOrthographic` to draw each moon, with phase angles calculated from a lunar period formula derived from a known new moon epoch. The SVG output is organized using `d3.scaleLinear` and `d3.scalePoint` for axes, and dates are generated via `d3.timeDays`.

CCurran Kelleher
69% match