Skip to main content
SimilarExport ZIP
100%

World_Map_practice

✓ Published0🌍 Public
Mmartin
Last edited Mar 20, 2022
Created on Mar 20, 2022

This interactive world map displays all countries as light green shapes on a blue sphere, highlighting them in red on hover. It renders geographic boundaries using the `d3.geoPath` projection with the `geoNaturalEarth1` projection and supports pan and zoom through the `d3.zoom` API. The map is built from world-atlas TopoJSON and TSV data, which supplies country names via ISO codes, and each shape includes a tooltip showing the country name.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

World_Map_Practice

This interactive world map visualizes the country boundaries and names from the world-atlas dataset (50m.tsv and 50m.json) using a Natural Earth projection. The map uses D3 v5 to render the geographic paths as SVG elements, with the topojson library converting the TopoJSON to GeoJSON features. The visualization supports zooming and panning through the `d3.zoom` module, and country tooltips display the name from the TSV data on hover, with the fill color changing to red.

Mmartin
92% 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
91% match
Loading thumbnail…

World test

This visualization displays a world map with countries colored light green against a blue sphere, using natural Earth projection. Hovering over a country turns it red, and users can zoom and pan the map interactively. The code loads TopoJSON and TSV data from the world-atlas package, converting TopoJSON to GeoJSON via topojson.feature and rendering paths with d3.geoPath. Zoom behavior comes from d3.zoom, while country names are joined from the TSV file and shown as SVG title tooltips.

OOldenkamp
90% match
Loading thumbnail…

World Map

This world map uses a natural Earth projection to display country boundaries, with a dark blue ocean sphere and light green landmasses. Hovering over a country turns it red and reveals its name via a tooltip. The visualization supports zooming and panning through d3.zoom, with geographic paths rendered using d3.geoPath. It loads world country geometries from TopoJSON and country names from a TSV file, both sourced from the world-atlas package.

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

World Map practice

This example displays a world map rendered with a natural Earth projection, showing countries filled in light green against a blue sphere backdrop. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using topojson.feature. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath to generate SVG paths, and appends country and sphere elements to the SVG canvas. The code applies styling through CSS classes for fills and strokes, with stroke opacity set to 0.1.

Ddankvader1
89% match
Loading thumbnail…

World Map interaction

This interactive world map displays country boundaries over a blue sphere, with countries highlighted in green and a darker shade on hover. It uses D3’s geoPath and geoNaturalEarth1 projection to render geographic features from a TopoJSON dataset provided by world-atlas. The zoom behavior, implemented via the d3.zoom API, adjusts the SVG group’s transform during navigation. The visualization renders as SVG within an HTML page, and the code relies on the topojson library’s feature function to extract country polygons.

EEmma
89% match
Loading thumbnail…

World

A world map rendered with D3 shows countries in light green on a light blue sphere, with black borders highlighting national boundaries. The visualization uses the Natural Earth projection via `geoNaturalEarth1` and draws the sphere and country paths with `geoPath`. Country data comes from the World Atlas TopoJSON dataset, loaded through `json` and converted with `feature`. Users can pan and zoom the map using D3’s `zoom` behavior, while hovering over a country turns it darker green, revealing its name in a tooltip.

AAndreas Loew
89% match