Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
NNecklessCage
Last edited Apr 12, 2020
Created on Apr 12, 2020

This visualization displays a world map using a Natural Earth projection, with each country rendered as a white SVG path with green borders using D3 v4’s `d3.geoPath` and TopoJSON data from `world-110m.json`. Country names from `world-country-names.csv` are joined to the geometry via their IDs. Hovering over a country changes its fill to grey, thickens its stroke, and shows a tooltip with the country’s name that follows the mouse cursor.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example shows an interactive world map that displays country borders and names, with a dark blue ocean sphere and light green landmasses. The map uses the Natural Earth projection via `d3.geoNaturalEarth1` and renders geographic features as SVG paths generated by `d3.geoPath`. Hovering over a country changes its fill to red, and a `zoom` behavior applies pan and zoom transforms to the map group. Country data comes from the world-atlas TopoJSON file, converted with `topojson.feature`.

AAbishek-Dulal
89% match
Loading thumbnail…

Untitled

This example shows a world map rendered as gray countries with white borders, overlaid with white circles marking populated places from Natural Earth data. Hovering over a country or city highlights it in pink or blue, respectively. The visualization uses D3 v3's `d3.geoMercator` projection and `d3.geoPath` to draw GeoJSON features from two remote sources: world-110m.geojson for countries and ne_50m_populated_places_simple.geojson for places. Circles are positioned via the projection’s coordinates and respond to mouseover and mouseout events.

JJumblii
88% match
Loading thumbnail…

Untitled

This example displays a world map rendered as SVG paths, with each country filled in grey and stroked with white. The visualization uses a Mercator projection centered on the equator, configured via `d3.geoMercator` with a custom scale and rotation. The code loads US Atlas topology data from a remote JSON file and uses `topojson.feature` to extract country boundaries, which are then drawn with `d3.geoPath`. The SVG container is created using `d3.select` and appended to the document body.

Sspace-captain96
88% match
Loading thumbnail…

Untitled

This example presents a choropleth map of the world, coloring each country according to its economic classification. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1()` and renders SVG paths with `d3.geoPath`. Country boundaries are stroked in black, and hovering turns a country black. The code merges TopoJSON geometry with TSV data, and colors are assigned using `d3.scaleOrdinal` with a reversed `d3.schemeSpectral` palette, where the legend is not shown. Data is sourced from the `world-atlas` package and a custom TopoJSON file.

Vvenkatajayanth03
87% match
Loading thumbnail…

Untitled

This example shows a world map rendered as light green countries against a blue sphere, with black country borders at low opacity. It uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw geographic shapes, while `topojson.feature` extracts country polygons from the world-atlas dataset (110m resolution). The SVG is populated asynchronously after fetching the TopoJSON file, and the sphere is drawn first as a filled path. Styling comes entirely from CSS classes.

Ffaaty
87% match
Loading thumbnail…

World Map

This map visualizes country borders using a natural Earth projection, with country names displayed as tooltips on hover. The visualization uses D3 v5’s `d3.geoPath` and `geoNaturalEarth1` for geographic projection, while TopoJSON’s `feature` method extracts country geometries from world-atlas data. Countries are rendered as SVG paths styled with CSS. The map supports zooming and panning through D3’s `zoom` behavior, which applies a transform to all country shapes. The data comes from the world-atlas TopoJSON and TSV files, which provide geometry and country names.

Iimmanentdomain
87% match
Loading thumbnail…

Untitled

A world map rendered in the Mercator projection displays country boundaries as grey paths with thin white strokes. The example demonstrates loading GeoJSON-derived topology data from a local `world-110m2.json` file and converting it to SVG paths using `d3.geoPath`. The map is centered and rotated with `d3.geoMercator` and `projection.rotate`, and country features are extracted via `topojson.feature` from the TopoJSON library. The page uses D3 v7 to fetch the data asynchronously with `d3.json` and append the resulting paths to an SVG container.

Sspace-captain96
87% match
Loading thumbnail…

Hover Over Country to See Name

This interactive world map renders country boundaries as SVG paths using D3’s `geoPath` and `geoNaturalEarth1` projection. Hovering over a country reveals its name via an SVG `<title>` tooltip, populated from world-atlas TSV data keyed by ISO country code. Clicking a country highlights its outline in red by restyling the path’s stroke attribute. The example uses D3 v5, topojson for feature extraction, and includes a blue sphere backdrop.

Jjons288
86% match