AzimutalMap

100%

✓ Published0🌍 Public

Last edited Oct 27, 2021

Created on Oct 24, 2021

This example shows a world map projected using the Bertin 1953 projection, rendered as an SVG with a white sphere background and interactive country outlines. Hovering over a country changes its fill color to red. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `d3.json` and converts them using `topojson.feature`. It then applies the `d3.geoPath` generator with the `d3.geoBertin1953` projection to draw each path, and relies on `d3.select` and SVG elements for rendering.

AI-generated description

Mapy začínají 6:45:00 Pokračuj na interaktivní mapu 7:05:10

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This example displays a world map with countries rendered as filled beige shapes against a light blue sphere, using an azimuthal equal-area projection. It loads GeoJSON country boundaries from the world-atlas dataset via TopoJSON and draws them as SVG paths with d3.geoPath. The code applies d3.geoAzimuthalEqualArea for projection, sets stroke opacity for country borders, and uses D3 v5 with topojson.feature to extract geometries.

Hhappymail6

85% match

Loading thumbnail…

World Map using Mercator Projection

This example displays a world map using the Mercator projection, rendered as SVG paths with countries filled in white on a blue ocean background. It loads GeoJSON country boundaries from a gist and uses `d3.geoMercator` for projection, `d3.geoPath` to generate the paths, and `topojson.feature` to convert TopoJSON data. A sphere outline is drawn first, and country paths are appended dynamically from the fetched dataset.

Bbhargavarathod

85% match

Loading thumbnail…

world map

This example displays a world map using an equal-area natural Earth projection, with countries rendered as paths that fill with a soft beige color and turn red on hover. The visualization initially shows a blue sphere backdrop, and users can pan and zoom via mouse interaction. The code loads country boundaries and names from the world-atlas package (50m resolution) and uses `d3.geoPath` with `d3.geoNaturalEarth1` for projection, while `topojson.feature` extracts geometry. Interactivity is handled through `d3.zoom`, which adjusts the SVG group's transform on zoom events, and each country path includes a tooltip title with its name from the TSV data.

Zzhangfa

85% match

Loading thumbnail…

World Map

This example displays an interactive world map using a natural Earth projection, with countries rendered as filled paths that highlight red on hover. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, joining country names via ISO codes. It uses d3.geoPath with geoNaturalEarth1 for projection, d3.zoom for pan and zoom interactions, and TopoJSON’s feature method to convert topology to GeoJSON. The SVG sphere appears blue, while countries are light green with black strokes.

CChinzorigt Ganbat

84% match

Loading thumbnail…

World map

This example shows an interactive world map rendered as an SVG, with countries filled in green that turn red on hover against a sky-blue sphere background. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features using the `feature` method from TopoJSON. The visualization uses D3’s `geoEquirectangular` projection and `geoPath` to generate country outlines, while `select` and `selectAll` manage the SVG path elements. The map is drawn entirely with D3 v5 and CSS styling for hover effects.

Nnikhilagopi

84% match

Loading thumbnail…

World Map

This example displays a purple spherical projection of the world with pink country boundaries rendered as SVG paths using D3’s geoEquirectangular projection and geoPath. It loads country geometries from a TopoJSON world-atlas file and converts them to GeoJSON via the topojson feature method. The visualization highlights each country with an orange hover fill, while strokes define national borders.

TTejucmandava

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

84% match

Loading thumbnail…

Untitled

A world map rendered in the Mercator projection displays country boundaries as grey paths with thin white strokes. The example demonstrates loading GeoJSON-derived topology data from a local `world-110m2.json` file and converting it to SVG paths using `d3.geoPath`. The map is centered and rotated with `d3.geoMercator` and `projection.rotate`, and country features are extracted via `topojson.feature` from the TopoJSON library. The page uses D3 v7 to fetch the data asynchronously with `d3.json` and append the resulting paths to an SVG container.

Sspace-captain96

83% match