Skip to main content
SimilarExport ZIP
100%

StartOfMap

✓ Published0🌍 Public
Bbideckerz
Last edited May 19, 2021
Created on May 19, 2021

This example displays a world map using the equirectangular projection, with countries rendered as dark red polygons outlined in black against a light blue ocean sphere. The visualization uses d3.geoPath and d3.geoEquirectangular to project geographic data, while topojson.feature converts the TopoJSON from the world-atlas countries-110m dataset into GeoJSON features. Each country path is appended dynamically to an SVG container as the data loads asynchronously via d3.json.

AI-generated description
MIT Licensed

Similar vizzes

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

world Map

This visualization displays an interactive world map using a simple equirectangular projection. Countries are rendered as SVG paths with light green fills and indigo outlines, with hover states that turn them maroon. The map supports pan and zoom interactions. The code uses d3.geoEquirectangular, d3.geoPath, and d3.zoom, loading GeoJSON data from the world-atlas TopoJSON file via topojson.feature.

Mmandadi1999
87% match
Loading thumbnail…

World Map with D3.js and Topojson

This example displays a world map using an equirectangular projection, rendered as an SVG graphic. The map is drawn with countries filled in orange, each with a white stroke, and a blue sphere representing the globe's background. Hovering over a country changes its fill to green. The visualization is built with D3.js version 5 and TopoJSON version 3, loading country boundaries from the world-atlas countries-110m.json file. It uses `d3.geoEquirectangular` for projection, `d3.geoPath` for generating SVG paths, and TopoJSON's `feature` method to convert the dataset into GeoJSON features.

Bbugfree55
86% match
Loading thumbnail…

World Map

This example displays an interactive world map using an equirectangular projection. It renders countries as yellow SVG paths with black outlines, and hovering over a country highlights it in green. The visualization uses D3 v5’s `geoEquirectangular` and `geoPath` for map projection and path generation, and TopoJSON’s `feature` method to convert the world-atlas TopoJSON data into GeoJSON features. A blue sphere path represents the globe’s background.

Aaashrithd4
86% match
Loading thumbnail…

World Map

This example displays an interactive world map using a natural Earth projection, with countries rendered as filled paths that highlight red on hover. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, joining country names via ISO codes. It uses d3.geoPath with geoNaturalEarth1 for projection, d3.zoom for pan and zoom interactions, and TopoJSON’s feature method to convert topology to GeoJSON. The SVG sphere appears blue, while countries are light green with black strokes.

CChinzorigt Ganbat
86% match
Loading thumbnail…

World Map

This visualization displays a world map using an equirectangular projection, rendering countries and the globe’s sphere outline in distinct colors against a warm background. It loads geographical data from the world-atlas TopoJSON source, then uses d3.geoPath and d3.geoEquirectangular to generate SVG paths for each country. The code leverages topojson’s `feature` method to parse the dataset, and D3’s `select` and `json` handle DOM selection and asynchronous data fetching within a React framework.

TTejamod
85% match
Loading thumbnail…

Let's make a Map!

This example displays a world map of countries as light green shapes against a dark blue spherical background, using a Mercator projection. It loads geographic data from the world-atlas TopoJSON dataset and renders it as SVG paths with d3.geoPath. The code employs d3-geo projections, topojson.feature for extraction, and a select-all data join to bind country features to path elements.

ZZY Huang
85% match
Loading thumbnail…

world map

This example displays a world map using an equal-area natural Earth projection, with countries rendered as paths that fill with a soft beige color and turn red on hover. The visualization initially shows a blue sphere backdrop, and users can pan and zoom via mouse interaction. The code loads country boundaries and names from the world-atlas package (50m resolution) and uses `d3.geoPath` with `d3.geoNaturalEarth1` for projection, while `topojson.feature` extracts geometry. Interactivity is handled through `d3.zoom`, which adjusts the SVG group's transform on zoom events, and each country path includes a tooltip title with its name from the TSV data.

Zzhangfa
85% match