World Map with D3 Final

100%

World Map with D3 Final

✓ Published5🌍 Public

Last edited Dec 27, 2022

Created on Dec 27, 2022

This interactive world map displays country boundaries as selectable SVG paths over a blue sphere, with hover highlighting in red. The visualization uses D3’s `geoPath` and `geoNaturalEarth1` projection to render geographic features, while the `topojson` library’s `feature` function processes TopoJSON data from the world-atlas package. Country names are loaded from a TSV file and mapped to each path’s `id`. A zoom control, implemented via D3’s `zoom` event, adjusts the SVG transform. Data sources include the 50m world-atlas TSV and JSON files.

AI-generated description

Interactive Worldmap with geoNaturalEarth1 view.

Bostock: worldmap

Bostock: Dataset for title function to return country names

Reference:

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map with D3 Final

This interactive world map displays country boundaries and names using a natural Earth projection, with a colored sphere background and hover effects that highlight individual countries in red. Built with D3 v5 and TopoJSON, the visualization loads geographic data from the world-atlas package, combining TSV country name metadata with JSON topology data. The code uses `geoNaturalEarth1`, `geoPath`, and `zoom` for projection and panning, while SVG paths render the map with CSS styling for interactivity.

TToly

94% match

Loading thumbnail…

World Map

This world map visualizes country boundaries, rendered as SVG paths using D3's `geoPath` and `geoNaturalEarth1` projection. The map loads geographic data from the world-atlas package, combining a TopoJSON file with a TSV file to attach country names to each region. Hovering over a country turns it red, and a native SVG `<title>` element displays the country name. The map also includes a blue sphere background and supports zooming via the `d3.zoom` API, applying transformations to the country group.

LLeah Mitchell

92% match

Loading thumbnail…

World Map with D3 2 Final

This interactive visualization presents a world map using an orthographic projection, displaying country boundaries with hover effects that highlight each nation in red. The map also supports zoom and pan through D3’s zoom behavior. Built with D3 v5 and TopoJSON, it renders as SVG and loads geographic data from the world-atlas package, combining TSV country names with GeoJSON features. The projection and path generation rely on d3.geoOrthographic and d3.geoPath.

CChawin Sungwalngern

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

92% match

Loading thumbnail…

World Map

This map visualizes country borders using a natural Earth projection, with country names displayed as tooltips on hover. The visualization uses D3 v5’s `d3.geoPath` and `geoNaturalEarth1` for geographic projection, while TopoJSON’s `feature` method extracts country geometries from world-atlas data. Countries are rendered as SVG paths styled with CSS. The map supports zooming and panning through D3’s `zoom` behavior, which applies a transform to all country shapes. The data comes from the world-atlas TopoJSON and TSV files, which provide geometry and country names.

Iimmanentdomain

92% match

Loading thumbnail…

World Map

This interactive world map displays country boundaries on a natural Earth projection, with tooltips showing country names on hover. The visualization uses D3.js v5 with d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for pan and zoom functionality. It loads geographic data from the World Atlas TopoJSON files at unpkg.com, combining country geometries with name mappings from the accompanying TSV file. SVG paths represent countries and the surrounding sphere, with hover interactions highlighting selected regions in blue.

Yyamunayennem

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

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