fresh block

100%

✓ Published0🌍 Public

Last edited Jul 19, 2018

Created on Jul 19, 2018

This interactive map displays Mapbox street tiles across a full-screen view, with zoom and pan controls that update the visible tile set. Built with D3 v3, it uses the custom `d3.geo.tile` plugin to calculate which tiles are needed for the current zoom level and viewport, then positions them as absolutely placed `<img>` elements. The zoom behavior updates the projection and tile layer via a CSS `matrix3d` transform, while a coordinate readout shows the latitude and longitude under the cursor.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example presents an interactive map of the United States that layers OpenStreetMap raster tiles over a vector outline of the country. Users can pan and zoom, which triggers the loading of new map tiles and the redrawing of the state boundaries. The visualization is built with D3 v4, using its geographic projection and path modules alongside the d3-tile and d3-zoom libraries. The vector data originates from a local US GeoJSON file, while the background imagery is fetched from the OpenStreetMap tile server.

AAnaMal08

81% match

Loading thumbnail…

fresh block

A rotating world map displays continents in a continuous spin. Using D3.js v4, the visualization loads GeoJSON country boundaries and applies an orthographic projection. The code sets up an SVG canvas and employs `d3.geoOrthographic` and `d3.geoPath` to render the geographic shapes. A timer-driven animation updates the projection's rotation along the X-axis, causing the globe to turn smoothly. The map's data originates from a remote GeoJSON source provided in the code, and the frame is rendered dynamically as an SVG path that updates each tick.

NNafisehmousavian

76% match

Loading thumbnail…

fresh block

A map of Boston displays hundreds of small dots that animate from a radius of 1 to 6 pixels over one second. The dots represent points from a CSV file loaded with D3. The visualization uses Mapbox GL JS for the base map and D3 to project geographic coordinates into screen positions. As the user pans or zooms the map, the dots reposition themselves in real time, with each dot styled in teal with a darker stroke. The animation runs on page load, and the map has scroll zoom disabled.

Aabender14

75% match

Loading thumbnail…

fresh block

A map of London shows a cluster of dots animating from radius one to radius six, each positioned by latitude and longitude from a CSV file. The visualization uses Leaflet with a Mapbox tile layer, and D3.js to render SVG circles that are projected to pixel coordinates and repositioned as the map pans or zooms, overlaid on the map’s overlay pane.

CChmits

74% match

Loading thumbnail…

Zoomable Map Tiles

This interactive map shows a zoomable view of OpenStreetMap tiles that smoothly pans and zooms across geographic regions. It uses the `d3.geo.tile` plugin to calculate which 256x256 tile images are visible in the viewport based on current scale and translate values, while `d3.behavior.zoom` handles user panning and zooming interactions. The tiles are rendered as `img` elements positioned absolutely, and a `d3.geo.mercator` projection inverts mouse coordinates to display the latitude and longitude at the cursor.

Mmbostock

74% match

Loading thumbnail…

fresh block

A world map of countries is rendered as SVG paths using D3's `d3.geo.equirectangular` projection and `d3.geo.path` tool, colored light gray except for those with authority data, which are filled with a lighter orange. Clicking a country zooms in via a D3 transition on the `g` group, and a text zone updates with the country's name, linking to its grid authority URL if available. The interaction relies on `d3.behavior.zoom` to handle pan and zoom, with the map data sourced from an external `grid_countries.txt` file containing GeoJSON.

RRCura

74% match

Loading thumbnail…

Tile Viewer

This example shows a zoomable map interface where the user can pan and zoom across geographic tiles. It displays each tile as a numbered 256-by-256-pixel square with a red border and its coordinates as text, updating the visible grid as the viewport changes. The code uses d3.geo.tile, d3.geo.mercator, and d3.behavior.zoom, applying a CSS 3D matrix transform to reposition tiles during zoom events. It relies on a gist by mbostock and the d3.v3 library, with tile positions computed from the current zoom scale and translation.

Mmbostock

73% match

Loading thumbnail…

fresh block

An orthographic globe rotates to highlight each country in sequence, with the current country’s name displayed in a title above the canvas. The visualization uses d3.geo.orthographic projection, d3.geo.path for rendering land, borders, and the globe outline on a Canvas 2D context, with transitions tweening the projection rotation via d3.interpolate. Country centroids are computed with d3.geo.centroid, and the order is alphabetical based on names from the world-country-names.tsv dataset, paired with world-110m.json TopoJSON data.

Aabdul-alim

73% match