Skip to main content
SimilarExport ZIP
100%

world map with d3

✓ Published1🌍 Public
RRITUZZ
Last edited Jan 28, 2021
Created on Jan 28, 2021
Forked from d3 intro

A world map rendered in SVG shows country boundaries and a stylized ocean using a natural Earth projection. The visualization loads GeoJSON country data from the world-atlas dataset and projects it with `d3.geoNaturalEarth1` and `d3.geoPath`. A sphere outline is drawn as a separate path, while countries are filled with light green and outlined in black. The code imports `d3.json`, `select`, and `geoPath` from D3 v6, and uses `topojson.feature` to convert TopoJSON regions into drawable features.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

world map

This example displays a world map using natural Earth projection, with countries rendered as green filled paths with subtle black strokes against a blue spherical backdrop. It demonstrates loading TopoJSON country boundaries from the world-atlas package, converting them to GeoJSON via `topojson.feature`, and projecting them with `d3.geoNaturalEarth1` and `d3.geoPath`. The visualization also shows a sphere outline created from a GeoJSON Sphere object, all drawn as SVG elements using D3 v5’s selection and data-join methods.

Ppei9223
91% match
Loading thumbnail…

World Map

The visualization displays a world map using a natural Earth projection, with countries rendered as green filled regions outlined by black borders. The code builds the map by fetching country boundaries from the world-atlas dataset via `json()`, then processes them through `topojson.feature()` to extract geometries. D3's `geoNaturalEarth1` projection and `geoPath` generate the SVG paths for each country, while a separate path with class 'sphere' draws the globe's outline. The map appears static, with no interaction or data encoding beyond geographic boundaries.

RRupeshGandham
91% match
Loading thumbnail…

Let's make a map with D3.js!

A world map rendered in SVG shows country boundaries as light green paths against a dark blue sphere, using a Natural Earth projection. The code loads world-atlas TopoJSON data from unpkg, converts it to GeoJSON with `topojson.feature`, and draws each country with `d3.geoPath`. The sphere outline is generated from a projected GeoJSON sphere object. D3 v5 handles the asynchronous JSON loading and DOM selection.

NNecklessCage
91% match
Loading thumbnail…

World Map Example

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as SVG paths. The visualization shows a natural Earth projection of the globe, with countries filled in light green and oceans in blue, using a grayscale-style aesthetic. The code loads geographic data from the world-atlas TopoJSON file and applies `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `topojson.feature` to extract country features. A sphere outline is drawn first, followed by individual country paths appended to the SVG canvas.

Ccpsshan
91% match
Loading thumbnail…

world map

This example renders a world map using the Natural Earth projection, displaying country boundaries as green SVG paths with yellow strokes on a green background. It fetches geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON features using the `feature` function from topojson. The visualization uses d3.geoPath with d3.geoNaturalEarth1 to project and draw the paths, while d3.json loads the remote dataset asynchronously before appending the country shapes to the SVG canvas.

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

world map

This example displays a world map rendered as an SVG using D3 v5 and TopoJSON. It shows country boundaries and a green sphere representing the Earth’s surface. The code loads geographic data from a JSON file, processes it with the `feature` function from TopoJSON, and projects it using `geoNaturalEarth1`. Paths are generated with `d3.geoPath` and styled with blue country fills and black strokes.

Kkranthireddyskr
91% match