Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published0🌍 Public
NNita
Last edited Nov 7, 2018
Created on Oct 26, 2018

This example builds an interactive SVG map of the world using D3.js v5 and the topojson library. It renders a natural Earth projection with blue oceans and light green countries, using data from the world-atlas GeoJSON file. The code employs `d3.geoPath` and `d3.geoNaturalEarth1` to project and draw geographic features, with `topojson.feature` converting the TopoJSON source into usable polygons. Each country appears as a path with a subtle black stroke.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js v5 and TopoJSON. It renders a natural Earth projection of countries as SVG paths, with a blue sphere background and green country fill. The code loads geospatial data from the world-atlas package, converts TopoJSON features using `topojson.feature`, and applies a `d3.geoPath` generator with `d3.geoNaturalEarth1` projection. The map is drawn by appending path elements to an SVG container, with styling defined in an external stylesheet.

AAndrewTsai0406
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example visualizes world map countries using a natural Earth projection onto an SVG canvas. Each country appears as a light green path with subtle black borders, set against a dark blue background. Built with D3 v5, the code uses d3.geoNaturalEarth1 for projection and d3.geoPath for rendering geographic features. TopoJSON converts the world-110m dataset into GeoJSON features, which are then appended as SVG paths. The data comes from the world-map package hosted on unpkg.

NNita
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js v5, rendering country boundaries as light green SVG paths on a blue sphere. It shows a natural Earth projection with subtle black stroke outlines for each country. The visualization loads GeoJSON data from the world-atlas TopoJSON file using `d3.json`, then converts it to geographic features with `topojson.feature`. The code applies `d3.geoPath` with a `geoNaturalEarth1` projection to draw both the sphere background and individual country shapes onto the SVG canvas.

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

Let's make a map with D3.js!

This example uses a natural Earth projection to render a world map from TopoJSON data, with countries drawn as filled paths and a dark blue sphere as the base. It builds the visualization by loading the world-atlas dataset from unpkg and using `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate SVG paths, and the `topojson.feature` method to convert TopoJSON to GeoJSON. The result is a simple, static SVG map with light green countries and translucent black strokes.

Aanuj1450
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 world map rendered as SVG paths, with countries filled in light green against a dark blue spherical backdrop. Using D3 v5, it loads world-110m TopoJSON data via `d3.json`, converts the TopoJSON features with `topojson.feature`, and projects them using `d3.geoNaturalEarth1` and `d3.geoPath`. A separate path for the sphere applies the same projection to outline the globe, while country borders are drawn with a subtle black stroke.

NNita
94% match
Loading thumbnail…

Let's make a map with D3

This example renders a world map using D3 v5 and TopoJSON, loading country boundaries from the World Atlas TopoJSON dataset. It displays the Earth’s sphere in light blue and each country as a gray filled path with white strokes, projected using a Natural Earth projection. The code employs `d3.geoPath` with a `d3.geoNaturalEarth1` projection, and `topojson.feature` to convert TopoJSON data into GeoJSON features for SVG path generation.

NNikki-gea
94% match