Skip to main content
SimilarExport ZIP
100%

WORLD MAP

✓ Published1🌍 Public
Ppaularl
Last edited Jan 26, 2020
Created on Jan 26, 2020

This interactive world map displays country boundaries with a custom equirectangular-like projection, colored in muted green with cyan oceans. Hovering over a country highlights it in bright green. The visualization uses D3.js to load GeoJSON and TSV data from the world-atlas package, combining them to create SVG paths with country names via tooltips. It implements zooming through the `d3.zoom` module and renders the sphere and countries using `d3.geoPath` with the Natural Earth projection.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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

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

World map

This visualization displays a natural Earth projection world map, with countries rendered as colored SVG paths on a blue sphere. The map uses d3.geoNaturalEarth1 and d3.geoPath to project and draw geographic features, while d3.zoom enables pan and zoom interactions that transform the entire map group. Country boundaries come from the world-atlas TopoJSON dataset, and the rendering uses SVG paths with hover highlighting that changes the fill color.

Ssrivalliwuyyuru
89% match
Loading thumbnail…

d3 Visualization Map

This example displays a zoomable world map using a natural Earth projection, with countries colored light green and the ocean rendered as a blue sphere. Built with D3 v5 and TopoJSON, it loads country boundaries from the world-atlas dataset (50m.json) and names from 50m.tsv. The map supports interactive pan and zoom via d3.zoom, while d3.geoPath and geoNaturalEarth1 handle geographic rendering. Countries highlight red on hover, with tooltips showing country names. The visualization is rendered as SVG, with the sphere and country paths generated from the projected GeoJSON features.

JJohnPaulPagelerJr
89% 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
89% match