Skip to main content
SimilarExport ZIP
100%

world map

✓ Published0🌍 Public
Sshabbab01
Last edited Apr 3, 2022
Created on Apr 3, 2022

This example shows a world map rendered as an SVG. It displays countries as white shapes with black outlines on a blue sphere, with a hover effect that changes a country’s fill to orange. The code uses D3 v5 to load GeoJSON country boundaries via `json` and then draws them with `geoPath` and a `geoEquirectangular` projection. It also uses the TopoJSON `feature` function to process the raw data from the world-atlas dataset.

AI-generated description
MIT Licensed

Similar vizzes

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
93% match
Loading thumbnail…

World Map

This example renders a world map as a static SVG graphic. It displays countries in orange against a blue sphere, with a red hover highlight effect. The visualization uses D3.js functions `select`, `json`, `geoPath`, and `geoEquirectangular` for the equirectangular projection. It loads GeoJSON country boundaries from the `world-atlas` package via `json()`, converting them with the TopoJSON `feature` API before drawing with `geoPath`. The stylesheet defines the sphere and country fills.

CCH SAMPATH
91% match
Loading thumbnail…

World Map

This example displays a world map rendered as an SVG, with countries filled in orange against a sky-blue sphere. The visualization uses D3 v5’s `geoEquirectangular` projection and `geoPath` to draw country outlines, while TopoJSON’s `feature` method converts the world-atlas countries dataset into geographic features. Hovering over a country changes its fill to red via CSS, and the map includes a black stroke with partial opacity for borders.

HHarshavardhan
91% match
Loading thumbnail…

world map

This example presents a static world map of all countries rendered as SVG paths, using gray fill with black strokes on a yellow background. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON with the `feature` function from topojson. The map is projected using `d3.geoNaturalEarth1`, and each country’s outline is drawn with `d3.geoPath` and `projection` assigned. The visualization relies on D3 v5’s `select`, `json`, and `geoPath` modules, with no interactivity or additional data encoding.

Ssiddu7147
91% match
Loading thumbnail…

world map

This example shows a world map of all countries rendered as grey SVG paths with black borders on a yellow background. It uses D3 v5's `geoNaturalEarth1` projection and `geoPath` to generate the geographic shapes. Country boundaries come from a TopoJSON file loaded from the world-atlas dataset via a URL, processed with the `topojson.feature` API. The code fetches the data asynchronously with `json()`, then appends each country as a `path` element to the SVG canvas.

Ppavankalyan1507
91% match
Loading thumbnail…

worldmap

This example displays an interactive world map with countries rendered as individual SVG paths, colored light green with black outlines, and highlighted in red on hover. It uses D3 v5's `geoNaturalEarth1` projection with `geoPath` to draw the map, and a light blue sphere for the oceans. Country boundaries come from the `world-atlas` package's countries-50m GeoJSON data, and the `topojson-client` library converts TopoJSON to GeoJSON for feature extraction. The chart supports zooming via D3's `zoom` event, which updates the SVG group transform in real-time.

Hhxc20060903
90% match
Loading thumbnail…

world map

This example displays a world map rendered as an SVG using D3 v5 and TopoJSON. It shows country boundaries and a green sphere representing the Earth’s surface. The code loads geographic data from a JSON file, processes it with the `feature` function from TopoJSON, and projects it using `geoNaturalEarth1`. Paths are generated with `d3.geoPath` and styled with blue country fills and black strokes.

Kkranthireddyskr
90% match
Loading thumbnail…

World Map

This example renders an interactive world map using SVG, with countries shown in brown and the globe’s sphere in light blue. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON via the `feature` method. The map uses `d3.geoEquirectangular` for projection and `d3.geoPath` to generate the paths. Hovering highlights countries by changing their fill color through CSS, while D3 v5 and TopoJSON handle the data binding and rendering.

HHemanthh81
90% match