fresh block

100%

✓ Published0🌍 Public

Last edited Dec 7, 2017

Created on Dec 7, 2017

An interactive azimuthal equidistant map of the world shows a red geodesic line and an orange point near Asia. Dragging rotates the projection, while zooming scales the SVG group containing all map elements. The visualization loads GeoJSON country boundaries from visionscarto.net and renders them as paths using `d3.geoPath` with a `d3.geoAzimuthalEquidistant` projection. Interaction is handled by `d3.drag` and `d3.zoom`, with rotation applied directly to the projection on each drag event.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

83% 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

82% match

Loading thumbnail…

D3 map drag demo

This example presents an interactive orthographic globe rendered with SVG. Users can click and drag to rotate the projection, which dynamically updates the graticule and country boundaries. The visualization uses d3.geoOrthographic, d3.geoPath, d3.zoom, and d3.drag to handle the interaction. Country polygons come from the world-atlas TopoJSON dataset, with names from the accompanying TSV file displayed as tooltips.

JJacob Philpott

79% match

Loading thumbnail…

fresh block

This example shows a spinning globe visualization that rotates continuously to display world continents. The orthographic projection rotates around the vertical axis using `d3.geoOrthographic()` and `d3.geoPath`, with the rotation angle driven by `d3.timer` based on elapsed time. The globe renders country boundaries from a GeoJSON file loaded via `d3.json`, while the SVG background is styled with a light blue color. The code uses D3 v4 for all geographic projections, path rendering, and animation timing, with no additional libraries or interactive elements.

CCanaramour

79% match

Loading thumbnail…

fresh block

This example shows a spinning orthographic globe with continent outlines, rendered as SVG paths. The map rotates continuously using a `d3.timer` that updates the projection’s rotation, while `d3.geoPath` redraws the continent geometry each frame. The globe is styled with a light blue background and uses GeoJSON country data loaded from a remote URL. Although a CSV file with city pollution data is included, it is not referenced in the code. The visualization relies solely on D3 v4’s geographic and timer utilities.

CCanaramour

79% match

Loading thumbnail…

D3 map drag demo

This demo displays an interactive orthographic globe where users can click and drag to rotate the Earth, with country boundaries rendered as SVG paths and tooltips revealing country names on hover. The sphere, graticule, and countries are drawn using d3.geoPath with a d3.geoOrthographic projection, while rotation is handled manually through d3.drag events that adjust the projection’s rotate values. Country geometries come from the world-atlas TopoJSON dataset (50m resolution) paired with a TSV file for name lookups, and the visualization also supports d3.zoom for additional transformations.

GGlebenator

78% match

Loading thumbnail…

Fork of D3 map drag demo

This example shows an interactive orthographic globe rendered with SVG, where users can drag to rotate the Earth and see country boundaries and graticule lines. The code uses `d3.geoOrthographic` for projection and `d3.geoPath` to draw geographic features from TopoJSON data sourced from the world-atlas package. Drag events update the projection’s rotation, while zoom is handled via `d3.zoom`. Country names are loaded from a TSV file and displayed as tooltips using SVG `<title>` elements.

RrayaneB0t

77% match

Loading thumbnail…

Drawing a box

This interactive visualization displays a graticule, country boundaries, and a red rectangular region on an orthographic projection of the Earth. Users can drag to rotate the globe, using the d3.drag module to adjust the projection’s rotation, revealing the selected bounds. Built with d3-geo-projection.v3, it renders via SVG using d3.geoPath and d3.geoGraticule, with country data sourced from the world-atlas TopoJSON. The d3.zoom module enables panning and scaling of the entire graphic.

GGlebenator

77% match