Map_ABUTAYYEM

100%

✓ Published0🌍 Public

Last edited Nov 2, 2025

Created on Nov 2, 2025

Forked from Map

This example displays a map of Palestine using a filled green geographic boundary, with three cities overlaid as orange population-scaled circles. It loads world country data as TopoJSON from the world-atlas package, filters the Palestine feature by numeric ID 275, and renders it with d3.geoMercator and d3.geoPath. Circle radii derive from population values via a square-root scale, and the D3 v7 SVG with a tooltip and legend shows interactive details.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map!

This map visualization displays countries as light green polygons with black outlines, set against a blue spherical background representing the globe. The example uses D3.js v5, specifically d3.geoPath and d3.geoNaturalEarth1 for the map projection, along with the TopoJSON library to convert geographic data into SVG paths. Country boundaries are rendered from the world-atlas countries-110m.json dataset, which is fetched and processed asynchronously. The visualization demonstrates a basic choropleth-free world map, focusing on geographical shape rendering rather than data encoding.

AAbhijeet Panda

74% match

Loading thumbnail…

map of d3

This map of d3 displays the world’s countries as green, stroked polygons, using a Mercator projection. The data comes from the world-atlas GeoJSON file, which is loaded via d3.json and converted into geographic features with topojson’s feature function. The code uses d3.geoPath and d3.geoMercator to generate the SVG paths, while d3.select appends each country’s shape to the canvas. Population figures from the included data.csv are not visualized in this example.

HHillKinsh

72% match

Loading thumbnail…

Map with D3.js!

This example shows an interactive world map rendered with D3.js, displaying country boundaries and names using SVG. It uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate the geography from TopoJSON world-atlas data (110m resolution) with country names joined from a TSV file. Countries highlight red on hover, and `d3.zoom` enables pan and zoom interactions on the map.

SSadafNaseem

72% match

Loading thumbnail…

map

This visualization displays a world map where each country is colored according to its population using a sequential yellow-orange-red color scale. Population data is loaded from a CSV file and merged with country geometries from the world-atlas TopoJSON dataset. The map uses a Mercator projection via d3.geoMercator and renders paths with d3.geoPath, while hovering over a country reveals its name and population in a tooltip. Missing data appears gray, and the SVG canvas includes a light blue background.

PP Manisha

72% 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

72% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js. It loads geographic data from the World Atlas TopoJSON file and projects country boundaries with a spherical Mercator projection. The visualization uses `d3.geoPath` and `d3.geoMercator` to convert GeoJSON features into SVG paths, with the TopoJSON library’s `feature` method extracting country polygons. The resulting map renders as simple filled paths on a blank SVG canvas, showing the continents and country outlines.

TTomisin Owolabi

72% match

Loading thumbnail…

Maps

This map visualization displays world country boundaries as green polygons on a light gray sphere, with hover effects turning countries red and tooltips showing country names. It loads TopoJSON data from the world-atlas package, converts it to GeoJSON using `topojson.feature`, and renders it with `d3.geoPath` using the `geoNaturalEarth1` projection. The map supports zooming and panning through `d3.zoom`, with the zoom transform applied to an SVG group element. Population data from data.csv is not visually encoded.

Ssploitfun

72% match

Loading thumbnail…

Untitled

This example shows a world map with cities whose populations exceed 50,000, rendered as semi-transparent circles sized by the square root of their population. The map includes landmasses, country interiors, graticules, and a background sphere, all drawn using `d3.geoPath` with the Natural Earth projection (`geoNaturalEarth1`). City data comes from a Simplemaps CSV loaded via `d3.csv`, while country boundaries are derived from World Atlas TopoJSON processed with `topojson.feature` and `mesh`. The visualization is built with React and D3 v4, using `scaleSqrt` to map population values to circle radii.

Ssdilbaz

72% match