Untitled

100%

✓ Published0🌍 Public

Last edited Nov 21, 2019

Created on Nov 19, 2019

This example displays a world map colored by continent, with each landmass labeled at its geographic centroid. It uses a Natural Earth projection with a slight rotation, rendered as SVG paths. The code loads TopoJSON data, converts it to GeoJSON features via `topojson.feature`, and projects centroids using `d3.geoCentroid` and `d3.geoPath`. Continent colors are assigned from a hardcoded array, and labels are appended as SVG `<text>` elements. The visualization relies on d3.v4, topojson.v2, and d3-geo-projection.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Untitled

A world map rendered in the Mercator projection displays country boundaries as grey paths with thin white strokes. The example demonstrates loading GeoJSON-derived topology data from a local `world-110m2.json` file and converting it to SVG paths using `d3.geoPath`. The map is centered and rotated with `d3.geoMercator` and `projection.rotate`, and country features are extracted via `topojson.feature` from the TopoJSON library. The page uses D3 v7 to fetch the data asynchronously with `d3.json` and append the resulting paths to an SVG container.

Sspace-captain96

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

87% match

Loading thumbnail…

Untitled

This example displays a world map rendered as SVG paths, colored grey with thin white stroke lines separating countries. The map uses the Mercator projection, centered on the prime meridian and rotated to show the eastern hemisphere. Users can pan and zoom interactively via a d3.zoom handler, which applies a transform to the grouped country paths during the zoom event. The geographic data comes from a TopoJSON file loaded with d3.json, and the features are extracted using topojson.feature before being drawn with d3.geoPath. The projection is configured with d3.geoMercator, and the zoom scale is restricted to a range of 1 to 8.

NNatalija Jansone

87% match

Loading thumbnail…

Untitled

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.

Ffaaty

86% match

Loading thumbnail…

Untitled

This example presents a choropleth map of the world, coloring each country according to its economic classification. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1()` and renders SVG paths with `d3.geoPath`. Country boundaries are stroked in black, and hovering turns a country black. The code merges TopoJSON geometry with TSV data, and colors are assigned using `d3.scaleOrdinal` with a reversed `d3.schemeSpectral` palette, where the legend is not shown. Data is sourced from the `world-atlas` package and a custom TopoJSON file.

Vvenkatajayanth03

85% match

Loading thumbnail…

world map

This example displays a natural Earth projection world map, rendering landmasses in teal against a light gray sphere with subtle graticules and country borders. It loads geospatial data from the World Atlas TopoJSON file using `d3.json` and processes it with `topojson.feature` and `topojson.mesh`. The SVG paths are generated with `d3.geoPath` and `d3.geoNaturalEarth1` inside a React component, with styling applied via CSS class selectors for the land, sphere, interiors, and graticules.

TTanupat B.

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

85% match

Loading thumbnail…

Untitled

This example shows a world map colored by population data, though the color encoding is incomplete as the code only logs country IDs to the console instead of applying the fill. It uses D3 v4 with `d3.geoMercator` projection, `d3.geoPath` for rendering countries as SVG paths, and a `d3.scaleThreshold` with `d3.schemeBlues` for potential color mapping. The external data includes a GeoJSON world topology and a CSV of country population values, loaded asynchronously via `d3.queue`. The map is rendered as an SVG element with a fixed width and height.

Yyvesponcon

85% match