fresh block

100%

✓ Published0🌍 Public

Last edited Jul 5, 2017

Created on Jul 5, 2017

This example overlays a red geodesic circle around Pyongyang on a world map, using an azimuthal equidistant projection to show the range of a missile strike as a consistent distance on the globe. It also draws a red line between Pyongyang and Washington, D.C., with red points marking both cities. The visualization uses D3 v4 with `d3.geoCircle`, `d3.geoPath`, and `d3.geoAzimuthalEquidistant` to render SVG paths. Country boundaries come from a GeoJSON file loaded via `d3.json`, while the sphere outline and projected features are drawn as SVG path elements.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

geoCircle in d3.v4

This example visualizes concentric geo-circles radiating from two fixed points on a world map: the North Pole and Washington, D.C. It uses `d3.geoCircle()` to generate spherical circles at increasing radii, with `d3.geoPath()` and an equirectangular projection to render them as SVG paths. The code draws the circles in red and blue before overlaying landmasses from TopoJSON. It demonstrates how d3.v4’s geographic circle generator computes geodesic rings, with radii ranging from 5 to 85 degrees. The map is rendered at 960×500 pixels using D3’s `d3.geoEquirectangular` projection.

PPhilippe Rivière

76% match

Loading thumbnail…

geoCircle in d3.v4 (geoOrthographic)

This example visualizes concentric circles radiating from two geographic points—the North Pole and Washington, DC—using a d3.geoOrthographic projection. The circles, generated with d3.geoCircle, are drawn as SVG paths via d3.geoPath, with radii incrementing from 5 to 85 degrees. The map includes land masses rendered from TopoJSON world data, styled with fills and strokes. The code loads d3.v4 and topojson.v1 from CDNs, and the interaction between the circle generator and projection demonstrates how to create geodesic rings on a globe-like view.

PPhilippe Rivière

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

74% match

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map showing country boundaries as light green filled paths on a steel blue sphere, using a geographic equal Earth projection. The map is drawn entirely as SVG with D3 v5 and TopoJSON, loading the world-atlas 110m dataset from unpkg. The code defines a path generator via d3.geoPath and d3.geoEqualEarth, appends a spherical outline, then converts the TopoJSON topology to GeoJSON features using topojson.feature before binding them to path elements.

JJefferson Abreu

72% match

Loading thumbnail…

World Map with D3.js!

This example displays a world map as an SVG, with pink countries outlined in red against a blue spherical backdrop. It uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate paths from TopoJSON data loaded from the world-atlas package. A sphere path is drawn first, followed by country features from the dataset. Hovering over a country changes its fill color, demonstrating basic interactivity within a D3 v5 workflow.

DDINESH SAI BOPPANA

72% match

Loading thumbnail…

World Map with D3.js!

This visualization displays a world map with countries rendered as pink shapes outlined in red against a blue spherical background. It uses d3-geoPath with an equirectangular projection to draw geographic features, and topojson's feature method to extract country polygons from the Natural Earth dataset loaded via world-atlas. The sphere background is created by passing a Sphere geometry object to the same path generator. Hovering highlights individual countries by changing their fill color.

DDINESH SAI BOPPANA

72% match

Loading thumbnail…

Let's make a map!

This example renders an interactive orthographic globe using D3’s `geoOrthographic` and `geoPath` projections. It loads world country boundaries from TopoJSON and country names from a TSV file, then displays each country as a light-green SVG path that turns red on hover, with tooltips showing the country name. The globe itself is drawn as a dark-blue sphere, and all interactions rely on D3’s data join and selection methods.

DDannie2020

72% match

Loading thumbnail…

Great Arc

This example visualizes a great arc between Washington, D.C. and Beijing as a red LineString on an equirectangular projection. The projection is rotated to keep the entire arc visible without interruption. It also renders a graticule, land masses, and country boundaries from a TopoJSON world-50m dataset. The code uses d3.geo.equirectangular, d3.geo.path, d3.geo.graticule, and topojson.feature to draw the SVG elements.

Mmbostock

72% match