Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Ffaaty
Last edited Apr 15, 2019
Created on Apr 15, 2019

This example shows a world map rendered as light green countries against a blue sphere, with black country borders at low opacity. It uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw geographic shapes, while `topojson.feature` extracts country polygons from the world-atlas dataset (110m resolution). The SVG is populated asynchronously after fetching the TopoJSON file, and the sphere is drawn first as a filled path. Styling comes entirely from CSS classes.

AI-generated description
MIT Licensed

Similar vizzes

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

Untitled

This example shows an interactive world map that displays country borders and names, with a dark blue ocean sphere and light green landmasses. The map uses the Natural Earth projection via `d3.geoNaturalEarth1` and renders geographic features as SVG paths generated by `d3.geoPath`. Hovering over a country changes its fill to red, and a `zoom` behavior applies pan and zoom transforms to the map group. Country data comes from the world-atlas TopoJSON file, converted with `topojson.feature`.

AAbishek-Dulal
89% match
Loading thumbnail…

Let's make a map!

This example shows a world map rendered with countries filled in light green and a blue sphere representing the Earth’s surface, all within an SVG. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while the TopoJSON library’s `feature` method extracts country boundaries from the world-atlas dataset. The code appends a sphere path and country paths, relying on the `json` function to load the TopoJSON data asynchronously.

Ccathykan
88% match
Loading thumbnail…

Untitled

This example displays a world map rendered as SVG paths, with each country filled in grey and stroked with white. The visualization uses a Mercator projection centered on the equator, configured via `d3.geoMercator` with a custom scale and rotation. The code loads US Atlas topology data from a remote JSON file and uses `topojson.feature` to extract country boundaries, which are then drawn with `d3.geoPath`. The SVG container is created using `d3.select` and appended to the document body.

Sspace-captain96
88% match
Loading thumbnail…

Making a Map

This example displays a world map as a set of light green countries against a blue sphere, rendered as SVG. The visualization uses the D3 library’s `geoNaturalEarth1` projection and `geoPath` generator, while the `topojson` package’s `feature` function converts the world-atlas TopoJSON data into geographic features for drawing. The sphere path is generated by passing a `Sphere` object to the same path generator. The map is fully drawn from the included `world-atlas` data source.

EEllednera
88% 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
87% match
Loading thumbnail…

World Map practice

This example displays a world map rendered with a natural Earth projection, showing countries filled in light green against a blue sphere backdrop. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using topojson.feature. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath to generate SVG paths, and appends country and sphere elements to the SVG canvas. The code applies styling through CSS classes for fills and strokes, with stroke opacity set to 0.1.

Ddankvader1
87% match
Loading thumbnail…

Untitled

This visualization displays a world map using a Natural Earth projection, with each country rendered as a white SVG path with green borders using D3 v4’s `d3.geoPath` and TopoJSON data from `world-110m.json`. Country names from `world-country-names.csv` are joined to the geometry via their IDs. Hovering over a country changes its fill to grey, thickens its stroke, and shows a tooltip with the country’s name that follows the mouse cursor.

NNecklessCage
87% match