Skip to main content
SimilarExport ZIP
100%

Basic geo path

✓ Published0🌍 Public
NNita
Last edited Aug 28, 2021
Created on Aug 27, 2021
Forked from Map_2

This example displays a world map using an equal-earth projection, with country boundaries drawn as SVG paths. It loads GeoJSON country shapes and CSV population growth data, computing a color scale based on the 2020 population growth rates for each country. The code uses d3.json, d3.csv, d3.geoEqualEarth, d3.geoPath, and d3.scaleLinear, though the population data is processed but not yet applied to the map. The visualization renders static gray country outlines without color encoding, demonstrating basic D3 v6 geographic path setup.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This example displays a world map by rendering country boundary shapes from a GeoJSON file using an equal-earth projection. It loads the geographic data with d3.json and draws each country as an SVG path via d3.geoPath. The map is appended to the page inside a fixed-size SVG container, demonstrating a minimal setup for showing vector-based geographic shapes with D3 version 6.

NNita
87% match
Loading thumbnail…

World Map

This example renders a world map using the geoEqualEarth projection and geoPath to draw countries, graticules, and sphere outlines in SVG. It loads country boundaries from the world-atlas TopoJSON dataset, using topojson.feature and topojson.mesh to extract country polygons and interior borders. The visualization, built with React and D3 v5, fills countries in teal, with light gray graticule lines and a lighter sphere background.

11993-INDALKAR
84% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map showing country boundaries as light green filled paths on a steel blue sphere, using a geographic equal Earth projection. The map is drawn entirely as SVG with D3 v5 and TopoJSON, loading the world-atlas 110m dataset from unpkg. The code defines a path generator via d3.geoPath and d3.geoEqualEarth, appends a spherical outline, then converts the TopoJSON topology to GeoJSON features using topojson.feature before binding them to path elements.

JJefferson Abreu
84% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries filled in teal against a blue sphere backdrop using an equal-earth projection. It loads geographic data from the world-atlas TopoJSON dataset, converts it to GeoJSON with the `feature` function from Topojson, and projects it through `d3.geoPath` combined with the `geoEqualEarth` projection from d3-geo-projection. The visualization demonstrates a minimal, clean map-making workflow using D3 v5.

KKurt J Nilsen
83% match
Loading thumbnail…

World Map

This example displays a world map using an equal Earth projection, with each country rendered as a filled SVG path and the surrounding sphere shown in light gray. The visualization loads GeoJSON data derived from the World Atlas TopoJSON dataset and passes it through d3.geoPath with a d3.geoEqualEarth projection. Built with React and D3 v5, the map uses SVG elements for crisp, scalable rendering.

Tthe-1000th-summer
83% match
Loading thumbnail…

Basic Map

This example displays a basic world map rendered as SVG paths. It uses the `d3.geoMercator` projection and `d3.geoPath` to convert geographic coordinates into screen paths. The map draws country boundaries from the world-atlas TopoJSON dataset, which is loaded via `json()`. The code applies the `feature()` method from topojson to extract country geometries, then appends one SVG `path` element per country. The resulting visualization shows a simple, unadorned map without interactive features or styling.

CChristopher Morrissey
83% match
Loading thumbnail…

HTML Starter

This example shows a world map rendered with D3’s Mercator projection, displaying country boundaries as SVG paths. The code loads GeoJSON country features from the world-atlas TopoJSON file via `topojson.feature`, then appends each country as a `<path>` using `d3.geoPath`. The accompanying `data.csv` includes population figures, but the current script does not encode population visually—only the geographic outlines appear. The map is drawn inside a fixed 960×600 SVG, with CSS styling for tick lines, though no axes or scales are currently applied to the map itself.

NNebotXavi
83% match
Loading thumbnail…

Let's make a map!

This example demonstrates a world map using an equal-earth projection, with countries rendered as light green regions and the spherical globe shown in blue. It fetches geographic data from the world-atlas package and visualizes it by applying the `geoPath` and `geoEqualEarth` functions from d3. The code uses topojson’s `feature` API to convert the TopoJSON data into GeoJSON features. Each country is drawn as an SVG path, with stroke opacity set to 0.1 for country boundaries. The entire map updates dynamically once the data is fetched and processed, displaying the complete set of countries in a single view.

XX. N. Chu
83% match