Skip to main content
SimilarExport ZIP
100%

World map

✓ Published1🌍 Public
GGiovanni Kaaijk
Last edited Nov 11, 2019
Created on Nov 11, 2019

A world map rendered with dark green landmasses and white outlines on a light blue background. The visualization uses a GeoJSON-derived feature collection from the world-atlas TopoJSON source, projected with `d3.geoMercator` and drawn via `d3.geoPath`. The code loads the TopoJSON file, converts it to GeoJSON features using `topojson.feature`, and appends SVG paths for each country. Styling is applied through CSS with the `fill` and `stroke` properties.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

A world map renders country landmasses as light green polygons with black outlines on a white background. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas package. The `topojson.feature` method extracts country boundaries from the dataset, and each polygon is appended to the SVG via a data join. A separate path for the globe’s outer sphere is drawn using a manually defined GeoJSON-like object.

HHARSHA BUDDANA
91% match
Loading thumbnail…

World map

A world map rendered with SVG paths displays countries in green on a blue background, using the Mercator projection. The code loads TopoJSON world-atlas data via `d3.json` and converts it to GeoJSON with `topojson.feature`. D3’s `geoMercator` and `geoPath` generate the country outlines, which are appended as `<path>` elements with a semi-transparent black stroke.

Eevapavlinek
90% match
Loading thumbnail…

World map with D3.js!

This example displays a world map using D3.js v5 and TopoJSON, with countries rendered as light green paths with subtle black borders on a blue background. It loads GeoJSON data from the world-atlas package via `d3.json`, converts it to features with TopoJSON’s `feature` function, and projects it using `d3.geoEquirectangular` and `d3.geoPath`. The SVG paths are generated and appended to the canvas, creating a simple, interactive-free geographic visualization.

Kkaviya-ds
89% match
Loading thumbnail…

World Map

This world map visualization displays countries across the globe, rendered as light green polygons with thin black outlines, set against a blue sphere. The map uses D3’s geo projection and path generation, specifically `d3.geoNaturalEarth1` and `d3.geoPath`, to draw the geographic boundaries. Country data comes from the world-atlas TopoJSON dataset, which is fetched and processed using the TopoJSON library’s `feature` function. The visualization relies on D3 version 5 and outputs an SVG graphic, with styling applied via CSS.

SsreepavanKothapalli
89% match
Loading thumbnail…

WorldMap with Topojson Data

A world map rendered with a light pink background and distinct filled landmasses, using topojson data from the world-atlas package. The visualization displays the globe with blue oceans and green countries, each outlined with faint black strokes. Built with D3 v5, the code uses `d3.geoPath` with a `geoNaturalEarth1` projection and the `topojson` library's `feature` method to process geographic data into SVG paths.

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

World Map with the world Topojson data

This example displays a world map using the Mercator projection, with each country rendered as a filled SVG path along a light green background and dark green borders. The map is built with the d3.geo.path API, which generates path data from the TopoJSON geometry of the world-atlas dataset. The code loads geographic data from a JSON file and uses topojson.object to extract country boundaries before injecting them into SVG path elements for visualization.

Aanushatod
88% match
Loading thumbnail…

World Map

This visualization displays a world map using a natural Earth projection, with landmasses filled in light green against a sky-blue sphere. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the `feature` function from TopoJSON. The map is rendered as SVG paths generated with `d3.geoPath` and `d3.geoNaturalEarth1`, with the sphere drawn first as a background path using a constructed sphere geometry.

LLG0498
88% match