Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Sspace-captain96
Last edited Jun 22, 2022
Created on Jun 21, 2022
Forked from D3 Starter

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

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
93% 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
91% 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
88% 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
88% match
Loading thumbnail…

Untitled

This example displays a map of the USA, projected using a Mercator projection, and rendered as a single grey SVG path. It loads world GeoJSON data from a GitHub repository, filters the features to include only the USA, and draws it with `d3.geoPath`. The code also includes an alternative, commented-out approach using `d3.geoAlbersUsa` to overlay a country on a world map. Additionally, it demonstrates the use of ES6 modules by exporting a message variable.

Ppasyasahas
88% match
Loading thumbnail…

Untitled

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.

RRoyCsuka
87% match
Loading thumbnail…

3.28-2

This example displays a world map rendered as a set of SVG paths using the Mercator projection. It loads geographic data from the World Atlas TopoJSON collection and converts it to GeoJSON with the TopoJSON `feature` function. The code applies `d3.geoPath` and `d3.geoMercator` to generate the country outlines, with paths appended to the SVG container. The visualization is minimal, showing only the mapped landmasses without additional styling or interactivity.

Aalbatross97
87% match
Loading thumbnail…

Untitled

This example displays a choropleth map of the United States with counties rendered as SVG paths, filled in light gray and highlighted in light blue on hover. The code loads a TopoJSON file of US counties from a remote GitHub repository and uses `d3.geo.mercator` with a fitted projection to size and position the map within the viewport. Counties are drawn via `d3.geo.path`, and the script references an additional tooltip feature using `d3.tip` in the accompanying test.js file, though that tooltip is not implemented in the visible code. The map is rendered entirely with D3 v3 and SVG.

AAnnie Ulichney
87% match