world map

100%

✓ Published0🌍 Public

Last edited Oct 19, 2017

Created on Oct 19, 2017

A world map uses a choropleth to show which countries have bilateral extradition treaties with the United States, shading countries with older treaties in purple and newer ones in orange, while those without treaties appear gray. The map is built with D3 v3, using the `d3.geo.naturalEarth` projection and `d3.geo.path` to render SVG land and boundary paths from a TopoJSON file. The code also loads an external offices CSV, though its data plays no role in the visual output.

AI-generated description

A choropleth showing which countries have bilateral extradition treaties with the United States, in response to <i>The Guardian</i>’s interactive guide to extraditions. Countries with older bilateral extradition treaties are shown in purple, while countries with younger treaties are shown in orange. Countries without bilateral extradition treaties are shown in gray.

This gives a quicker overview of which countries have bilateral agreements with the United States, though on the other hand, many tiny nations with such agreements are invisible in this map.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/5912673'>Extradition Treaties</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Extradition Treaties

A choropleth shades countries by the date of their oldest bilateral extradition treaty with the United States, using purple for older agreements and orange for newer ones, while gray indicates no treaty. The map shows the United States in black and includes a tooltip listing all treaty dates for each country. Built with d3.v3, it uses `d3.geo.path` for the Natural Earth projection, `d3.scale.linear` with HCL interpolation for coloring, and TopoJSON for world boundaries. Data comes from a TSV file of treaty dates.

Mmbostock

84% match

Loading thumbnail…

World Map

A choropleth-style world map renders landmasses in teal on a light gray sphere, with interior country borders highlighted in a brighter cyan. The visualization is built with React and D3, using `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to draw the sphere, graticule, land, and interior boundaries. Geographic data comes from the `world-atlas` TopoJSON source, processed via `topojson.feature` and `topojson.mesh`. The SVG output is styled with the Poppins font and custom CSS classes.

Nnpelliccia

77% match

Loading thumbnail…

Map

This example visualizes world countries as a choropleth-style map, coloring each country green with white borders on a dark blue spherical backdrop. The map renders as SVG using D3.js with a Natural Earth projection via `d3.geoNaturalEarth1`, and country boundaries are generated through `d3.geoPath`. Geographic data loads from the world-atlas TopoJSON file (countries-110m.json), which is converted to GeoJSON using the `feature` function from the topojson library. Hovering a country changes its fill to red, and each country includes a title tooltip displaying its name.

VVlad Bogo

76% match

Loading thumbnail…

world map

This example shows a world map of all countries rendered as grey SVG paths with black borders on a yellow background. It uses D3 v5's `geoNaturalEarth1` projection and `geoPath` to generate the geographic shapes. Country boundaries come from a TopoJSON file loaded from the world-atlas dataset via a URL, processed with the `topojson.feature` API. The code fetches the data asynchronously with `json()`, then appends each country as a `path` element to the SVG canvas.

Ppavankalyan1507

76% match

Loading thumbnail…

world map

This interactive world map displays country boundaries using a natural Earth projection rendered as SVG paths. The visualization loads geographic data from a JSON file, converts it into GeoJSON features via the `topojson.feature` API, and draws each country with `d3.geoPath` and `d3.geoNaturalEarth1`. The sphere background is styled skyblue, while countries fill with a blue tint and cyan strokes. The code uses D3 v5’s selection and JSON loading methods to fetch remote data from a GitHub gist.

Rrakeshkommineni

76% match

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

76% match

Loading thumbnail…

world map

This example presents a static world map of all countries rendered as SVG paths, using gray fill with black strokes on a yellow background. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON with the `feature` function from topojson. The map is projected using `d3.geoNaturalEarth1`, and each country’s outline is drawn with `d3.geoPath` and `projection` assigned. The visualization relies on D3 v5’s `select`, `json`, and `geoPath` modules, with no interactivity or additional data encoding.

Ssiddu7147

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

76% match