Let's make a map with D3.js

100%

Let's make a map with D3.js

✓ Published1🌍 Public

Last edited May 29, 2022

Created on May 29, 2022

Forked from Let's make a face with D3.js

This example shows a world map rendered as an SVG using D3.js, with countries filled in light green against a sky-blue sphere background. It uses the `geoNaturalEarth1` projection and `geoPath` to draw country boundaries from TopoJSON data loaded from the world-atlas package. The code fetches the countries-110m.json file, converts it to GeoJSON with `feature`, and appends each path to an SVG element. Both D3 v5 and TopoJSON are loaded via CDN, and the visualization is built with a React starter setup.

AI-generated description

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

Similar vizzes

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 oceans in blue. It uses the `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while `topojson.feature` converts TopoJSON country boundaries from the world-atlas dataset. The map’s sphere outline and country paths are appended to the SVG, with styling applied via CSS classes. The code loads geographic data asynchronously using `json` from D3 v5.

BBahareh Zarei

95% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG, with countries filled in light green against a blue sphere, using a natural Earth projection to display the globe. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them using the `feature` function from topojson. D3’s `geoPath` and `geoNaturalEarth1` projection generate the geographic paths, while a separate path outlines the spherical backdrop. The visualization is minimal, focusing on a clean, interactive-free display of global landmasses.

Ffaaty

95% match

Loading thumbnail…

Let's make a map with D3.js!

Ffaaty

95% 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 against a blue spherical backdrop. It uses D3.js version 5 and the TopoJSON library to load and convert world-atlas data (110m resolution) into GeoJSON features. The map is drawn with `d3.geoPath` and a natural Earth projection (`d3.geoNaturalEarth1`), while a separate path renders the globe’s sphere outline. Country boundaries appear with a subtle black stroke, and the map updates once the external JSON data loads.

Jjnpatel

95% 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 and oceans shown as a blue sphere. The code loads geographic data from the world-atlas TopoJSON file, converts it to GeoJSON using the topojson `feature` function, and draws it with `d3.geoPath` and `d3.geoNaturalEarth1` from D3 v5. A single SVG element sized 960 by 500 hosts the visualization.

Eexistentialist1888

95% match

Loading thumbnail…

Let's make a MAP with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green and the ocean depicted as a sky-blue sphere. It uses D3 v5 and TopoJSON to load world-atlas data at 110m resolution, then applies the `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate country boundaries. The map also draws a background sphere path, and country strokes are semi-transparent black. The code relies on `topojson.feature` to convert TopoJSON topology into GeoJSON features for rendering.

Ccledevoute

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

95% 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 ocean (sphere) in powder blue. It uses D3.js's `geoNaturalEarth1` projection and `geoPath` to convert geographic data into SVG path strings. The map data comes from the `world-atlas` package, loaded as TopoJSON and converted to GeoJSON using the `topojson.feature()` function. The `svg.append` and `selectAll` methods are used to draw the sphere and country paths onto the canvas.

Vvic126

95% match