Sudeep World Map with D3.js!

100%

Sudeep World Map with D3.js!

✓ Published0🌍 Public

Last edited Apr 10, 2023

Created on Apr 10, 2023

This example displays a world map using an equirectangular projection, rendering each country as a pink SVG path with black outlines on a blue sphere. The visualization uses D3 v5 functions `d3.geoEquirectangular` and `d3.geoPath` to project and draw the geography, while TopoJSON’s `feature` method converts country boundaries from the world-atlas TopoJSON file. Hovering over a country turns its fill white, highlighting the selected region.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 World Map.js!

This example renders an interactive world map using D3.js and TopoJSON. It displays all countries as green SVG paths on a blue sphere, with countries highlighted in pink on hover. The map uses the `geoEquirectangular` projection and `geoPath` to draw geographic features from the world-atlas dataset loaded via `json`. The code demonstrates basic D3 data joins with `selectAll`, `data`, and `enter`, and applies styling through CSS classes.

RRaja Srinivas Nelluri

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

84% match

Loading thumbnail…

World Map with D3.js!

This example shows a simple world map rendered as an SVG, with countries filled in green and a blue sphere background. Hovering over a country highlights it in orange. It uses d3.geoPath with the d3.geoEquirectangular projection to draw the map, and TopoJSON’s feature method to convert country boundaries from the world-atlas dataset. The code selects the SVG element, appends a sphere path, then joins country features to path elements.

SSonuSriN

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

84% match

Loading thumbnail…

World Map with D3.js!

A stylized world map visualizes countries as green regions with black outlines on a blue sphere, using D3.js v5 and TopoJSON. The code loads geospatial data from the world-atlas countries-110m.json file, converts it to GeoJSON features with the topojson `feature` function, and renders it into SVG paths via `d3.geoPath` with a `geoEquirectangular` projection. Hovering a country changes its fill to orange.

Ssainitish1999

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

83% match

Loading thumbnail…

sreekar ice 8 1

This visualization displays a world map using an equirectangular projection, with countries rendered as black shapes with red outlines against a green sphere. The map is drawn as SVG paths generated by `d3.geoPath` and `geoEquirectangular`, using TopoJSON data from the world-atlas package. Hovering over any country changes its fill to yellow via the `.country:hover` CSS rule. The code relies on D3 v5’s `json`, `selectAll`, and `enter` methods to bind the geographic features to the DOM.

SSreekarveeravelly

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

82% match