Skip to main content
SimilarExport ZIP
100%

Basis wereldkaart

✓ Published0🌍 Public
MManoukK
Last edited Jan 27, 2020
Created on Jan 27, 2020

This visualization displays a basic world map using the Natural Earth projection, with countries rendered as light green polygons and the surrounding sphere filled with light blue. Countries are drawn from the World Atlas TopoJSON dataset, which is loaded via `json`, converted to GeoJSON features with `feature`, and projected using `geoNaturalEarth1`. The map is generated with `geoPath` and rendered as SVG paths, demonstrating a straightforward D3.js mapping workflow.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This visualization displays a world map using a natural Earth projection, with landmasses filled in light green against a sky-blue sphere. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the `feature` function from TopoJSON. The map is rendered as SVG paths generated with `d3.geoPath` and `d3.geoNaturalEarth1`, with the sphere drawn first as a background path using a constructed sphere geometry.

LLG0498
86% match
Loading thumbnail…

World Map

This example renders a world map using a Natural Earth projection, displaying country boundaries as green shapes on a light blue sphere. The visualization uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate SVG paths from GeoJSON data converted from TopoJSON via the topojson.feature API. World country data is loaded from the world-atlas package, and the SVG includes a sphere outline to emphasize the spherical projection. The map is static, with no interactive elements or animations.

Llibramanju
85% match
Loading thumbnail…

World Map practice

This example displays a world map rendered with a natural Earth projection, showing countries filled in light green against a blue sphere backdrop. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using topojson.feature. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath to generate SVG paths, and appends country and sphere elements to the SVG canvas. The code applies styling through CSS classes for fills and strokes, with stroke opacity set to 0.1.

Ddankvader1
85% match
Loading thumbnail…

Map

This example displays a world map rendered as SVG paths, with countries filled in light green against a blue sphere representing the Earth. It uses the `geoNaturalEarth1` projection and `geoPath` from D3 v5 to generate the map geometry, while TopoJSON’s `feature` method extracts country boundaries from the world-atlas 110m dataset. The visualization highlights the geographic layout without interactive features, focusing on static rendering of global landmasses.

Bbideckerz
85% 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
85% match
Loading thumbnail…

worldmap

This example displays a world map using a natural Earth projection, with countries rendered as light green paths against a blue spherical backdrop. It loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON features using the topojson feature function. The visualization uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate the SVG path data, styling the sphere and country shapes through CSS classes.

Mmarianamartins87
85% match
Loading thumbnail…

Let's create a world map (geoNaturalEarth1)2 - with d3

This example displays a world map using the Natural Earth projection, with countries rendered as light green polygons against a dark blue sphere. The visualization loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `topojson.feature`, then projects them using `d3.geoNaturalEarth1` and draws them as SVG paths with `d3.geoPath`. A data join appends each country path, while a separate path illustrates the globe’s outline. The code relies on d3.select, d3.json, and d3.v5, with styling controlled by CSS classes.

AAsperge-Atomique
84% match
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
84% match