Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published1🌍 Public
DDi Zhen
Last edited Jun 23, 2019
Created on Jun 22, 2019

This example shows a world map rendered as an SVG using D3.js, with countries filled in turquoise and the ocean depicted as a blue sphere. It uses `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate paths, and TopoJSON’s `feature` method to convert country boundaries from the world-atlas 110m dataset. The code appends a sphere path and then country paths, with styling from CSS for fill and stroke.

AI-generated description
MIT Licensed

Similar vizzes

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 rendered as an SVG, with countries filled in light green against a blue spherical backdrop. It uses D3 v5 and TopoJSON to load world-atlas data, then applies a natural Earth projection via `d3.geoNaturalEarth1` and traces country boundaries with `d3.geoPath`. The code also draws a background sphere path to represent the globe.

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

Let's make a map with D3.js!

This example shows a simple world map rendered as an SVG, with countries filled in light green and oceans in blue using a Natural Earth projection. The code loads GeoJSON country boundaries from the World Atlas TopoJSON file and converts them into SVG paths using `d3.geoPath` and `d3.geoNaturalEarth1`. It relies on the `topojson.feature` API to extract country geometries, and appends each as a separate path element with a stroke to delineate borders.

KKevinw97
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example visualizes the world’s countries as filled polygons on a natural Earth projection, with oceans rendered in blue and landmasses in light green. It uses D3.js v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while TopoJSON’s `feature` function extracts country boundaries from a 110m world-atlas GeoJSON dataset. The code draws a sphere background and then overlays each country’s path, applying thin black strokes for borders.

AAdrian Herzog
94% 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
94% 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
94% match