Skip to main content
SimilarExport ZIP
100%

TRy 1

✓ Published0🌍 Public
MMukund Khandelwal
Last edited Sep 26, 2018
Created on Sep 26, 2018
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

TRy 1

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.

Vveagy
91% 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
84% 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
83% match
Loading thumbnail…

Maps

This example renders a world map using D3.js and TopoJSON, displaying countries as light green shapes against a dark blue spherical background. It uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate SVG paths from the world-atlas dataset. The code loads TopoJSON data, converts it to GeoJSON with topojson.feature, and appends country paths to an SVG container. The visualization demonstrates basic data binding and DOM manipulation while showing geographic features with minimal styling.

Cceresfin
83% match
Loading thumbnail…

Making a map

This map displays the world’s countries as light green polygons on a dark blue sphere, with hover highlighting in red. It uses d3.geoPath with a d3.geoNaturalEarth1 projection to render geographic features from TopoJSON data, which is merged with country names from a world-atlas TSV file. The visualization supports pan and zoom interaction via d3.zoom, and all drawing is done as SVG paths.

Aakshayms0
83% match
Loading thumbnail…

World_Map

This example displays a world map rendered as SVG paths, with countries filled in green against a dark blue spherical backdrop. It uses D3.js v5 and TopoJSON to load and project geographic data, applying the `geoNaturalEarth1` projection and `geoPath` generator to convert country features into scalable vector graphics. The map is drawn on a yellow background, with country borders outlined in black, and the sphere itself is styled using CSS classes. No interactive behavior or animations are included.

AAkrutiKhurana2103
83% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map using a natural Earth projection, with each country rendered as a light green SVG path. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the topojson feature function. D3 v5’s geoNaturalEarth1 projection and geoPath generator handle the map’s shape and layout. The map appears static, with country borders outlined in black and a subtle stroke opacity, though no sphere or ocean background is drawn.

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