Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published1🌍 Public
RRubens
Last edited Sep 24, 2018
Created on Sep 18, 2018

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map with countries filled in light green against a dark blue ocean sphere, projected using the Natural Earth projection. The visualization is built with D3.js v5, using `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate country boundaries from the world-atlas TopoJSON dataset. The `topojson.feature` library processes geographic features, and SVG paths render each country. The map is presented within an empty SVG canvas, with the sphere and country paths styled via CSS classes.

Ooptimizeresume
95% 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 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 an SVG, with countries filled in light green and oceans depicted as a blue sphere. It uses D3.js version 5 and TopoJSON to load and parse world-atlas data, then draws each country with the `d3.geoPath` and `d3.geoNaturalEarth1` projection. The code appends a sphere path first, then fetches the 110m dataset and adds country paths based on the TopoJSON features. Styling is handled via CSS classes.

YYERBOI95
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 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
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 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!

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!

This example shows a world map rendered as SVG paths, with countries filled in light green and the ocean as a blue sphere. It uses the D3.js v5 library along with TopoJSON to load and parse geographic data from the world-atlas package. The code applies a natural Earth projection via `d3.geoNaturalEarth1` and a `d3.geoPath` generator to draw both the sphere outline and country borders. A static 1000x500 SVG canvas displays the result.

MMounikaBeerelly
95% match