Skip to main content
SimilarExport ZIP
100%

d3: Topojson Basemap

✓ Published0🌍 Public
BBryanA999
Last edited Mar 31, 2022
Created on Mar 31, 2022
Forked from HTML Starter

This example displays a static map of the world’s countries, rendered as gray SVG paths with white borders. The visualization uses d3.v3 to load a TopoJSON file from the world-atlas package and transforms it with the `d3.geo.albersUsa()` projection. The code employs `d3.geo.path()` to convert geographic features into SVG path data, and appends each country as a path element with the class "name". The basemap is positioned within a 900 by 480 pixel SVG canvas, set via `d3.select` and attributes on the root element.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map of countries using D3.js and TopoJSON. It loads geographic data from the world-atlas dataset and displays country boundaries as SVG paths. The visualization uses `d3.geoMercator` for the projection and `d3.geoPath` to generate the path data from the TopoJSON features. Each country is appended as a `path` element to an SVG canvas sized 960 by 500 pixels.

Kkdvs94
89% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered with SVG paths, using D3.js v5 and TopoJSON. It loads geographic country boundaries from the world-atlas dataset and projects them with a Mercator projection. The code uses `d3.geoPath` and `d3.geoMercator` to generate the map, while `topojson.feature` converts the TopoJSON data into GeoJSON features. Countries appear filled in steel blue with black, semi-transparent borders, demonstrating a minimal choropleth-style base map.

HHwl98
88% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js and TopoJSON. It loads the world-atlas dataset and converts its TopoJSON topology into GeoJSON features, then draws each country as an SVG path. The map uses the Mercator projection via `d3.geoMercator` and `d3.geoPath` to generate the path data. Country polygons are filled with steelblue and outlined with black strokes, displaying a basic choropleth-style world map without additional data encoding.

Aabhijit01
88% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG paths, with country boundaries drawn from TopoJSON data. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to convert geographic coordinates into screen paths, while the `topojson.feature` API extracts country geometries from the world-atlas dataset. All countries are appended as individual `path` elements to a 960×500 SVG canvas. The code loads data asynchronously via `d3.json` and relies on the bundled `index.js` to handle the data-binding and path generation.

Aaxliao
87% match
Loading thumbnail…

D3 World Map

This example displays a world map rendered as black countries with white borders on an SVG canvas. It uses D3.js version 5 and the `d3.geoMercator()` projection to transform geographic coordinates, with `d3.geoPath()` drawing the country boundaries. The map data is loaded from a GeoServer WFS endpoint as GeoJSON, which is then converted to TopoJSON via the `topojson` library to structure the geometries for rendering. The visualization showcases D3’s ability to handle geographic data through its projection and path APIs.

AAsmabee Khan
87% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js and TopoJSON. It renders country boundaries as green SVG paths with thin black strokes on a dark blue background, using a Mercator projection. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features with the `feature` function. The code uses `d3.geoMercator` and `d3.geoPath` to project the map coordinates and generate the path data.

Ddacoylo
87% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as SVG paths filled with steel blue. The map uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to convert geographic coordinates into screen paths. It loads world-atlas data from unpkg, extracting country features with `topojson.feature`. The React framework is not actively used in the visible code; instead, the script directly appends paths to an SVG element.

Vvans01
87% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders an orthographic globe using D3.js and TopoJSON, drawing country boundaries as green SVG paths with white strokes over a sphere background. It loads world geography from the world-atlas dataset, converts TopoJSON features via `topojson.feature`, and projects them with `d3.geoOrthographic` and `d3.geoPath`. The map is static, with no rotation or interaction, and displays all countries at a 110m resolution.

Aaidanoconnor1
87% match