Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published0🌍 Public
Cchandrakalavanukuri
Last edited Apr 5, 2022
Created on Apr 5, 2022
Forked from World Map

This example displays a world map with countries rendered in light green and outlined in orange, set against a black spherical backdrop. It uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to convert geographic coordinates into SVG paths. Country boundaries are drawn from the TopoJSON `world-atlas` dataset fetched from unpkg, with `topojson.feature` parsing the country geometries before data joining appends each path to the SVG. The sphere outline is generated using a path generator on a sphere type geometry.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This example displays a world map with light green countries set against a blue ocean sphere, using a natural Earth projection. It renders the globe as an SVG path and then loads country boundaries from a TopoJSON dataset via the world-atlas package. The visualization uses d3.geoPath with d3.geoNaturalEarth1 to project geographic coordinates, and applies the topojson.feature method to extract country geometries. The sphere is drawn first as a full-world path, followed by individual country paths with subtle black strokes.

Ddev-snip
94% match
Loading thumbnail…

World Map

This example displays a static world map rendered as an SVG, with each country filled in light green and outlined in black. It uses the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to convert geographic coordinates into screen paths. Country boundaries come from the `world-atlas` TopoJSON dataset, parsed with `topojson.feature`. A single globe outline is drawn separately, while the map itself is built through a data join that appends a path per country feature.

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

World Map

This example renders a world map using a Natural Earth projection, displaying country boundaries as green shapes on a light blue sphere. The visualization uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate SVG paths from GeoJSON data converted from TopoJSON via the topojson.feature API. World country data is loaded from the world-atlas package, and the SVG includes a sphere outline to emphasize the spherical projection. The map is static, with no interactive elements or animations.

Llibramanju
93% match
Loading thumbnail…

World Map Example

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as SVG paths. The visualization shows a natural Earth projection of the globe, with countries filled in light green and oceans in blue, using a grayscale-style aesthetic. The code loads geographic data from the world-atlas TopoJSON file and applies `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `topojson.feature` to extract country features. A sphere outline is drawn first, followed by individual country paths appended to the SVG canvas.

Ccpsshan
93% match
Loading thumbnail…

World Map

This example displays a world map using a natural Earth projection, rendered as an SVG with D3 version 5 and TopoJSON. It highlights country boundaries with pink fills and maroon strokes, overlaid on a green sphere outline that represents the globe. The map is drawn using `d3.geoPath` with `geoNaturalEarth1` projection, while country geometries are loaded from a remote TopoJSON file and converted via the `feature` method from TopoJSON. The data source is a gist containing country coordinates.

Mmandadi1999
93% match
Loading thumbnail…

World Map

This example displays a world map rendered as an SVG, with each country filled in green and outlined with blue strokes. It projects the geographic data using the Natural Earth projection via `d3.geoNaturalEarth1` and generates paths with `d3.geoPath`. The code loads country boundaries from a TopoJSON file using `d3.json` and the `topojson.feature` API, then binds the resulting GeoJSON features to SVG path elements. The map is drawn on a static canvas without interactivity.

RRevanthReddyG
92% match
Loading thumbnail…

world map

This example displays a world map using natural Earth projection, with countries rendered as green filled paths with subtle black strokes against a blue spherical backdrop. It demonstrates loading TopoJSON country boundaries from the world-atlas package, converting them to GeoJSON via `topojson.feature`, and projecting them with `d3.geoNaturalEarth1` and `d3.geoPath`. The visualization also shows a sphere outline created from a GeoJSON Sphere object, all drawn as SVG elements using D3 v5’s selection and data-join methods.

Ppei9223
92% match