Skip to main content
SimilarExport ZIP
100%

International Map using d3.js

✓ Published0🌍 Public
Sshiiva-surya
Last edited Apr 11, 2023
Created on Apr 10, 2023

This example displays a world map using a natural Earth projection, with countries filled in teal and outlined in red. The visualization reads country boundary data from the world-atlas TopoJSON dataset hosted on jsDelivr. It uses d3.js v5 functions such as `geoNaturalEarth1` for projection, `geoPath` for generating SVG paths, and the TopoJSON `feature` function to extract country geometries from the topology. The map is rendered as an SVG inside an HTML page, with a light blue sphere background and hidden page margins.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Map with D3.js

This map visualization displays world countries on a natural Earth projection using D3.js and TopoJSON data from the world-atlas dataset. It renders an SVG sphere background and country paths filled with teal, which turn red on hover through CSS. The code employs D3 v6 features like `geoNaturalEarth1` and `geoPath` to project geographic coordinates, while `topojson.feature` extracts country boundaries from the loaded TopoJSON file. A tooltip showing each country’s name appears via appended `title` elements.

WWayne716
90% match
Loading thumbnail…

Map with D3.js

This visualization displays a world map using a natural Earth projection, with country boundaries rendered as filled SVG shapes. The sphere outline is drawn first using a `geoPath` generator with an empty GeoJSON sphere object. Country features are loaded from the World Atlas TopoJSON dataset via `d3.json` and converted using `topojson.feature`. The map uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` for path generation, with countries colored steelblue against a white background.

1123fischer
90% match
Loading thumbnail…

World map with D3.js!

This example displays a world map rendered in an SVG using D3.js v5. It projects country boundaries with the Natural Earth projection via `d3.geoNaturalEarth1` and draws them through `d3.geoPath`. The map’s ocean is a distinct blue sphere path, while countries appear as light green shapes with subtle black strokes. Geographic data comes from the world-atlas TopoJSON file, converted to GeoJSON using `feature` from the Topojson library.

TTatyana Milanova
90% 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
90% 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
90% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, rendering countries with a natural Earth projection. It displays a blue sphere background and green country shapes with subtle black borders. The code uses D3's `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while the TopoJSON library's `feature` function extracts country boundaries from a world-atlas dataset. The visualization loads geospatial data from a remote JSON file and renders the map entirely as scalable vector graphics.

Ssnschoenborn
90% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, rendering countries with a natural Earth projection. It displays a blue sphere background and green country shapes with subtle black borders. The code uses D3's `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while the TopoJSON library's `feature` function extracts country boundaries from a world-atlas dataset. The visualization loads geospatial data from a remote JSON file and renders the map entirely as scalable vector graphics.

Ssnschoenborn
90% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map using a natural Earth projection, with each country rendered as a light green SVG path. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the topojson feature function. D3 v5’s geoNaturalEarth1 projection and geoPath generator handle the map’s shape and layout. The map appears static, with country borders outlined in black and a subtle stroke opacity, though no sphere or ocean background is drawn.

Ssriramvsharma
90% match