experiments

100%

✓ Published0🌍 Public

Last edited Mar 5, 2021

Created on Mar 5, 2021

This example shows a world map with a graticule and a rectangular polygon overlay, rendered as SVG paths. Users can drag to rotate the projection and zoom to rescale the view. It uses `d3.geoEquirectangular` with `d3.geoClipPolygon` to clip the sphere, `d3.geoGraticule` for the grid, and `d3.geoPath` for rendering. Country boundaries come from TopoJSON data in the world-atlas package, with drag handling via `d3.drag` and zoom via `d3.zoom`. The polygon overlay is outlined via `arc.outline()`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

TEST

An interactive orthographic globe displays graticule lines, a red rectangular arc region, and a sphere outline, with a hidden world map loaded for future rendering. Users drag to rotate the projection via `d3.drag`, adjusting the rotation with `projection.rotate`, and zoom using `d3.zoom` to transform the SVG group. The visualization uses `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule`, fetching TopoJSON from the world-atlas package, while styling SVG paths with CSS classes for the sphere, graticule, and rectangle.

FFlash

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

81% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map with country boundaries and a graticule overlay, rendered as SVG using D3.js v5. It shows countries as light green polygons with subtle black strokes against a blue sphere background. The code uses `d3.geoNaturalEarth1()` for projection, `d3.geoPath()` for path generation, and TopoJSON’s `feature` method to convert World Atlas TopoJSON data (from unpkg) into GeoJSON. A graticule is drawn with `geoGraticule`, and the sphere outline is generated via `pathGenerator({type: 'Sphere'})`.

RRaajithaSabbineni

79% match

Loading thumbnail…

World Map

This example displays a world map rendered as SVG paths, with countries filled in light gray and outlined in black. It overlays a graticule grid and a foreground border, and also draws country borders in blue. The visualization uses the `d3.geoNaturalEarth1` projection and `d3.geoPath` to render geographic features from TopoJSON data loaded from the world-atlas package. Additionally, `d3.geoGraticule` generates the latitude and longitude grid lines, while the code includes a commented alternative to switch to a higher-resolution 50m dataset.

Hhlkyt

79% match

Loading thumbnail…

Activity-8.5.1

This example displays an interactive world map using a spherical projection, rendered as SVG paths. It loads geographic data from a TopoJSON file via `world-atlas@2`, converting it to GeoJSON features with `topojson.feature`. The visualization supports zooming through `d3.zoom`, and styles continents with `d3.geoPath` and `geoEquirectangular`. Hovering over countries changes their fill color to maroon.

Ppjdhungana@gmail.com

78% match

Loading thumbnail…

world map

This example displays a world map using a spherical projection. It renders countries as green paths with black outlines on a blue ocean sphere, and hovering over a country highlights it in orange. Built with D3 and TopoJSON, it uses `d3.geoEquirectangular` for projection and `d3.geoPath` to generate SVG paths from GeoJSON data sourced from the world-atlas countries-110m.json file. The visualization employs D3’s `select` and `json` methods to load and append geographic features to the SVG.

Sshabbab01

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

78% match

Loading thumbnail…

Let's make a map with D3.js!

This example projects a world map onto a sphere using D3.js version 5 and the TopoJSON library. It shows countries as light green filled SVG paths with black strokes at low opacity, set against a blue spherical backdrop. The code loads geographic data from the world-atlas package, then applies the `geoEquirectangular` projection and renders each country feature via `geoPath`. A `pathGenerator` also draws the sphere boundary, with styling defined in an external stylesheet.

CCodax2000

78% match