world map

100%

✓ Published1🌍 Public

Last edited Apr 3, 2022

Created on Apr 3, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

world map

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.

Sshabbab01

93% match

Loading thumbnail…

World Map with D3.js and Topojson

This example displays a world map using an equirectangular projection, rendered as an SVG graphic. The map is drawn with countries filled in orange, each with a white stroke, and a blue sphere representing the globe's background. Hovering over a country changes its fill to green. The visualization is built with D3.js version 5 and TopoJSON version 3, loading country boundaries from the world-atlas countries-110m.json file. It uses `d3.geoEquirectangular` for projection, `d3.geoPath` for generating SVG paths, and TopoJSON's `feature` method to convert the dataset into GeoJSON features.

Bbugfree55

91% match

Loading thumbnail…

world map

This example displays a world map using natural Earth projection, with countries rendered as green filled paths with subtle black strokes against a blue spherical backdrop. It demonstrates loading TopoJSON country boundaries from the world-atlas package, converting them to GeoJSON via `topojson.feature`, and projecting them with `d3.geoNaturalEarth1` and `d3.geoPath`. The visualization also shows a sphere outline created from a GeoJSON Sphere object, all drawn as SVG elements using D3 v5’s selection and data-join methods.

Ppei9223

91% match

Loading thumbnail…

World Map

This example displays an interactive world map using an equirectangular projection. It renders countries as yellow SVG paths with black outlines, and hovering over a country highlights it in green. The visualization uses D3 v5’s `geoEquirectangular` and `geoPath` for map projection and path generation, and TopoJSON’s `feature` method to convert the world-atlas TopoJSON data into GeoJSON features. A blue sphere path represents the globe’s background.

Aaashrithd4

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

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

91% match

Loading thumbnail…

World Map with D3.js!

This example renders a world map using an equirectangular projection, with countries filled in pink against a light blue sphere. It loads country boundaries from a TopoJSON file (world-atlas countries-110m.json) and converts them to GeoJSON features using the `feature` method. The visualization employs D3 v5’s `geoPath` and `geoEquirectangular` functions to generate SVG paths, and CSS hover styles highlight each country in green. The sphere and country shapes are appended as SVG path elements with distinct classes.

Yyaswanthsen

90% match