Skip to main content
SimilarExport ZIP
100%

Let's make a Map with simplified code!

✓ Published1🌍 Public
CChristine Lanser
Last edited Oct 6, 2020
Created on Oct 6, 2020

This example shows a world map rendered as SVG paths, with countries filled in light green and the ocean sphere in blue. The code uses D3 v5's `geoNaturalEarth1` projection and `geoPath` to convert geographic data into SVG path strings, while TopoJSON's `feature` method transforms the TopoJSON world-atlas dataset into GeoJSON features for rendering. A data join appends one path per country, and the map is loaded asynchronously via `d3.json` from a remote unpkg URL.

AI-generated description

DOM manipulation to make Map

MIT Licensed

Similar vizzes

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

Let's make a map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in light green and the globe as a blue sphere. It demonstrates loading geographic data from a TopoJSON file via `d3.json` and converting it to GeoJSON features using the `feature` function from the TopoJSON library. The map projection and path generation are handled by `d3.geoNaturalEarth1` and `d3.geoPath`, which draw the country boundaries and the sphere outline. The code uses D3 v5 and relies on the world-atlas dataset at 110m resolution.

Ggcappadaniel
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG paths, with countries filled in light green against a blue sphere. It uses D3.js version 5 and TopoJSON to load and convert world-atlas data from unpkg. The map is drawn using `d3.geoPath` with a `d3.geoNaturalEarth1` projection, and country boundaries are derived via `topojson.feature`. A static sphere outline is added first, then country paths are appended to the SVG. The code relies on promises to fetch and process the geographic data asynchronously.

Jjesramyep1263
93% match
Loading thumbnail…

Let's make a Map!

This example displays a natural Earth projection world map using SVG, with countries filled in light green and oceans rendered in blue. It loads GeoJSON country boundaries from a World Atlas TopoJSON file via `d3.json`, then converts the TopoJSON features using the `topojson.feature` API. The map is drawn with `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG paths, including a separate path for the globe’s sphere.

Rrainyrainyguo
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as an SVG using D3.js, with countries filled in light green and a blue sphere for the globe. It uses the `geoNaturalEarth1` projection and `geoPath` to draw country boundaries from TopoJSON data loaded from the `world-atlas` package. The code demonstrates basic data joining: it fetches the dataset with `json`, converts TopoJSON features using `feature`, and appends a `path` element for each country. The map fully occupies the viewport with hidden page overflow.

ZZhi Guangda
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries in light green and the ocean in blue. It uses D3.js v5’s `geoNaturalEarth1` projection and `geoPath` to generate geographic shapes, while the TopoJSON library’s `feature` function converts the world-atlas 110m GeoJSON data into features. A sphere outline and country boundaries are drawn with stroke styling, and the map is projected onto a 960 by 500 canvas.

RRubens
92% match
Loading thumbnail…

Let's make a map with D3.js

This example displays a world map using a natural Earth projection, with countries rendered as light green SVG paths with subtle black strokes. The map is drawn from TopoJSON data loaded from the visionscarto-world-atlas package, using D3 v5’s `geoPath` and `geoNaturalEarth1` projection. A blue sphere path outlines the globe’s boundary. The code specifically imports `feature` from TopoJSON to convert topologies into GeoJSON features, then binds the country data to SVG path elements. The map appears on a blank background with no additional interactive features or transitions.

Mmla341
92% match
Loading thumbnail…

Let's Make a Map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in green and oceans in blue using a Natural Earth projection. The visualization uses `d3.geoNaturalEarth1` to define the projection and `d3.geoPath` to generate the geographic paths. Country outlines are drawn from TopoJSON data loaded from the world-atlas package, converted to GeoJSON via `feature`. A background sphere path is also added to represent the globe. The code relies on D3 v6 and TopoJSON v3 for mapping and data processing.

Eegrebing
92% match