Skip to main content
100%

test world map block

✓ Published0🌍 Public
Aantonio-rodrigues
Last edited Oct 19, 2017
Created on Oct 19, 2017

This example renders a static world map onto a canvas element using D3 v4 and TopoJSON. It uses a `d3.geoEquirectangular` projection and `d3.geoPath` to draw country boundaries from the world-atlas 110m dataset. The map is displayed in muted earth tones with a red stroke only on the `.names` class, though no name labels are actually generated. The code appends an SVG layer to the canvas, but final output relies on SVG paths for the geographic features.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

World Map

This example displays a static world map rendered in SVG, with countries filled in green against a light blue ocean background. It uses D3 v4 with a Mercator projection via `d3.geoPath` and `d3.geoMercator` to trace country boundaries. Geographic data comes from the world-atlas TopoJSON file, processed with `topojson.feature`. The map is centered within an SVG canvas using explicit margins, and the overall color scheme includes a light beige page background.

KKishen Patel
83% match
Loading thumbnail…

Let's make a map with D3.js!

This example presents a static world map rendered with a light green fill on a dark blue background. It uses the equirectangular projection to display country boundaries as SVG paths, with data from the world-atlas TopoJSON dataset. The code builds the visualization with D3 v5’s `geoPath` and `geoEquirectangular` functions, alongside TopoJSON’s `feature` method to convert the TopoJSON topology into GeoJSON features. Each country is appended as a separate `path` element to the SVG canvas.

AArriannePandaraoan
83% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map of countries using D3.js and TopoJSON. It loads geographic data from the world-atlas dataset and displays country boundaries as SVG paths. The visualization uses `d3.geoMercator` for the projection and `d3.geoPath` to generate the path data from the TopoJSON features. Each country is appended as a `path` element to an SVG canvas sized 960 by 500 pixels.

Kkdvs94
83% match
Loading thumbnail…

World Map

This example displays a world map rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, drawing the sphere background and country boundaries. It loads world atlas TopoJSON data from the `world-atlas` package, converts it to GeoJSON with `topojson`’s `feature` function, and maps each country to an SVG path with a black fill and red stroke. The map is generated entirely client-side as SVG, using D3 v5.

Hhm0421
83% match
Loading thumbnail…

World Map

This example displays a world map rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, drawing the sphere background and country boundaries. It loads world atlas TopoJSON data from the `world-atlas` package, converts it to GeoJSON with `topojson`’s `feature` function, and maps each country to an SVG path with a black fill and red stroke. The map is generated entirely client-side as SVG, using D3 v5.

Hhm0421
83% match
Loading thumbnail…

making a map

This example renders a world map using the Mercator projection, displaying country boundaries as SVG paths. The code loads geographic data from the World Atlas TopoJSON file, converts it to GeoJSON using `topojson.feature`, and draws the countries with `d3.geoPath`. The map is created with d3.v7, using a static SVG canvas sized to 960 by 500 pixels. The visualization demonstrates a straightforward approach to converting TopoJSON into a projected map with minimal styling.

KKikkolatsch
83% match
Loading thumbnail…

Worldmap

This example displays a static world map of countries from the world-atlas TopoJSON dataset, rendered as SVG paths using D3.js. It uses the Natural Earth projection via `d3.geoNaturalEarth1()` and `d3.geoPath()` to draw country boundaries. Hovering over a country highlights it in red and shows a tooltip with the country’s ID and property count, implemented through D3 event handlers on the SVG paths. The map is fetched from a CDN and converted from TopoJSON to GeoJSON using the topojson library.

CCharith Kapuluru
83% match
Loading thumbnail…

world map

This example displays a world map using a spherical projection. It renders countries as green paths with black outlines on a blue ocean sphere, and hovering over a country highlights it in orange. Built with D3 and TopoJSON, it uses `d3.geoEquirectangular` for projection and `d3.geoPath` to generate SVG paths from GeoJSON data sourced from the world-atlas countries-110m.json file. The visualization employs D3’s `select` and `json` methods to load and append geographic features to the SVG.

Sshabbab01
83% match