Skip to main content
SimilarExport ZIP
100%

Fork of Map

✓ Published0🌍 Public
Mmaddulanagasanjana@gmail.com
Last edited Nov 9, 2025
Created on Nov 10, 2025
Forked from Map

This example displays a world map of countries rendered as light blue SVG paths with dark borders, using an Equal Earth projection fitted to the full viewport. The visualization loads geographic data from the World Atlas TopoJSON collection, converts it to GeoJSON features via topojson.feature, and draws each country with d3.geoPath. A hover tooltip reveals each country’s numeric ID, while the projection and path generator are configured through d3.geoEqualEarth and fitSize to center the globe.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Map

This example displays a world map colored according to a small set of country population figures, using lighter blue shades to represent higher values. It renders countries as SVG paths through `d3.geoPath` and the `geoEqualEarth` projection, with a Title and Labels for each of the eleven populated countries. The map loads TopoJSON from the `world-atlas` dataset via `d3.json`, and uses a `d3.scaleSequential` with `d3.interpolateBlues` to map populations. A legend in the top-left corner communicates the color scale range.

Mmaddulanagasanjana@gmail.com
92% match
Loading thumbnail…

Fork of Map

A world map rendered as an SVG displays all countries in light blue with white borders, centered using a Natural Earth projection. The visualization loads GeoJSON country boundaries from the world-atlas TopoJSON file via `d3.json`, converts the data with `topojson.feature`, and draws each country as a `path` element using `d3.geoPath` with the `d3.geoNaturalEarth1` projection. The map is static, with styling applied through a CSS class, and handles data-loading errors in the console.

Ppvvaishnavi93@gmail.com
90% match
Loading thumbnail…

Fork of Map

This map shows a world map rendered entirely in SVG, with each country drawn as a gray shape with dark borders. The visualization loads country boundaries from the `world-atlas` TopoJSON package, converts the topology to GeoJSON using the `topojson` library, and projects it with the Mercator projection via `d3.geoMercator`. The code uses `d3.geoPath` to generate the SVG paths and displays country identifiers in tooltips.

Kkodalijagadeesh9@gmail.com
89% match
Loading thumbnail…

Fork of map

This visualization presents a world map using a geographic projection, rendering countries as black shapes with red outlines on a light blue sphere. It highlights countries on hover by changing their fill to orange. The code uses D3 v5 for geo-spatial functions like `geoEquirectangular`, `geoPath`, and `select`, while TopoJSON’s `feature` method converts the external GeoJSON data to map features. The map data is sourced from a world-atlas JSON file hosted via CDN.

TTekmal-Bhavana
88% match
Loading thumbnail…

Fork of world map

This example displays a world map using a natural Earth projection, with all countries rendered as solid orange SVG paths with black borders against a blue background. The visualization fetches geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the topojson feature method. It relies on D3 v5’s geoPath and geoNaturalEarth1 for projection and path generation, while styling country shapes through CSS classes. The result is a simple, static choropleth-free map emphasizing geographic boundaries without additional interaction or aggregation.

Rreddysushma994@gmail.com
88% match
Loading thumbnail…

Fork of World Map

This example uses D3 to render a fork of a world map, displaying country boundaries as light green vector shapes on a white background through an SVG canvas. The visualization applies a Natural Earth projection using `d3.geoNaturalEarth1` and generates the geographic paths with `d3.geoPath`. It loads GeoJSON data from the `world-atlas` package, parses the countries using `topojson`, and draws each feature onto the SVG. The output is a static equirectangular-style map highlighting national borders with subtle black strokes.

NNaimisha-M
88% match
Loading thumbnail…

Fork of World Map

This example displays a simple world map rendered with SVG paths. It depicts the Earth’s natural Earth projection with countries filled in blue and outlined in yellow, set against a green sphere. The code uses D3’s `geoNaturalEarth1` projection, `geoPath` for generating the path data, and `topojson.feature` to parse the world-atlas GeoJSON data loaded from a remote URL. The visualization appends each country path to the SVG canvas.

Cchandrakalavanukuri
87% match
Loading thumbnail…

Fork of Map with D3.js!

This example displays a world map with countries rendered in green and outlined in black, highlighted in orange on hover. Built with D3.js v5 and TopoJSON, it uses the `geoEquirectangular` projection and `geoPath` to draw the sphere and country boundaries from a world-atlas GeoJSON file. The SVG output includes a static blue ocean background, with interactive hover states defined via CSS.

TTejucmandava
87% match