Skip to main content
SimilarExport ZIP
100%

TRy 1

✓ Published1🌍 Public
Vveagy
Last edited Sep 29, 2018
Created on Sep 26, 2018

This example displays a world map using a spherical projection, with countries rendered as green polygons against a blue ocean background. It shows geographic boundaries and allows user interaction by clicking on a country, which logs the country ID to the console. The visualization is built with the D3 library, using `d3.geoPath` and `d3.geoNaturalEarth1` for projection, and TopoJSON's `feature` function to process country data from the world-atlas 110m GeoJSON source.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

TRy 1

This visualization shows a world map rendered as SVG paths, with each country filled in light green and outlined in black against a blue sphere background. It uses d3.geoNaturalEarth1 projection and d3.geoPath to draw the geographic features, loading TopoJSON data from the world-atlas dataset. Countries are clickable, though the click handler currently only stores the selected country ID without triggering any visual update.

MMukund Khandelwal
91% match
Loading thumbnail…

Version 1

This example displays a world map using a natural Earth projection, with countries rendered as light green SVG paths. The map is built with D3 v5 and TopoJSON, loading geographic data from the world-atlas package (50m resolution) and matching country IDs to names from a TSV file. Hovering is disabled, but clicking a country sets a selected state and triggers a re-render. A zoom behavior enables panning and scaling, while a blue sphere path provides the ocean backdrop.

Vveagy
83% match
Loading thumbnail…

Map

This example displays a world map rendered as SVG paths, with countries filled in light green against a blue sphere representing the Earth. It uses the `geoNaturalEarth1` projection and `geoPath` from D3 v5 to generate the map geometry, while TopoJSON’s `feature` method extracts country boundaries from the world-atlas 110m dataset. The visualization highlights the geographic layout without interactive features, focusing on static rendering of global landmasses.

Bbideckerz
83% match
Loading thumbnail…

World Map

This example displays a world map with countries rendered as light green polygons on a blue sphere. It uses D3’s `geoPath` and `geoNaturalEarth1` projection to draw geographic features, and the TopoJSON `feature` function to convert country outlines from a remote 110m dataset. The SVG output includes a background sphere and country paths, with styling applied via CSS classes.

Ffaquora
83% match
Loading thumbnail…

Map

This example displays a world map using a natural Earth projection, with countries shown as light green shapes against a dark blue sphere background. The visualization is rendered as SVG paths derived from TopoJSON data loaded from the world-atlas package, with each country’s boundaries drawn using D3’s geoPath and geoNaturalEarth1 projection. The code utilizes D3 v6 for data binding and selection, while TopoJSON’s feature function converts the encoded topology into GeoJSON features for rendering.

Nnsadath
83% match
Loading thumbnail…

Let's Make a Map!

This example displays the world's countries on a natural Earth projection, with a dark blue sphere (ocean) and light green landmasses. The map is built using D3 v5’s `geoPath` and `geoNaturalEarth1` projection, while the TopoJSON library’s `feature` function converts country boundaries from the `world-atlas` dataset. Rendering occurs as SVG paths, with styling for country strokes and sphere fill.

Ggilbster
83% match
Loading thumbnail…

Let's make a map with D3.js!

This example visualizes the world’s countries as filled polygons on a natural Earth projection, with oceans rendered in blue and landmasses in light green. It uses D3.js v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while TopoJSON’s `feature` function extracts country boundaries from a 110m world-atlas GeoJSON dataset. The code draws a sphere background and then overlays each country’s path, applying thin black strokes for borders.

AAdrian Herzog
83% match
Loading thumbnail…

test

This example displays a world map using a natural Earth projection, with countries rendered as white shapes bordered by green strokes against a yellow sphere background. The visualization loads geographic data from the world-atlas TopoJSON dataset, converting it to GeoJSON features with the topojson feature method. D3’s geoPath and geoNaturalEarth1 are used to generate the projection and path data, while selections append each country path to the SVG canvas.

Kkartik900
83% match