Untitled

100%

✓ Published0🌍 Public

Last edited Nov 1, 2019

Created on Oct 31, 2019

A choropleth world map visualizes mock document counts by country, with countries colored on a scale from green to red based on their associated values. The map renders in SVG using the Mercator projection via `d3.geo.mercator` and `d3.geo.path`, with graticule lines drawn for reference. TopoJSON data from `world.json` is loaded and merged with aggregation data containing country codes and document counts, then filtered to exclude Antarctica. Country boundaries appear as white strokes, and users can hover to reveal labels, though labels remain hidden by default.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A choropleth map colors countries according to the number of students per country, with a sequential red color scale and a legend showing count ranges. The visualization uses D3 v5’s `d3.geoMercator` projection and `d3.geoPath` to render world topology from the World Atlas TopoJSON, while data from a TSV file is joined to country features. Country boundaries are styled with white strokes, and hovering highlights the selected country.

Bbambaleq

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

86% match

Loading thumbnail…

Untitled

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.

NNecklessCage

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

85% match

Loading thumbnail…

Untitled

This example displays a choropleth world map colored by the reported happiness score from a CSV dataset covering over 80 countries. The visualization loads world topography via TopoJSON, joins it with the tabular data, and maps each country’s score to a sequential blue color scale using `d3.scaleSequential` and `d3.interpolateBlues`. It renders the geographic boundaries as SVG paths through `d3.geoPath` with a Mercator projection. The underlying libraries are D3 v6 and the world-atlas TopoJSON collection.

NNikithakatta30

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

84% match

Loading thumbnail…

Untitled

This example shows a world map colored by population data, though the color encoding is incomplete as the code only logs country IDs to the console instead of applying the fill. It uses D3 v4 with `d3.geoMercator` projection, `d3.geoPath` for rendering countries as SVG paths, and a `d3.scaleThreshold` with `d3.schemeBlues` for potential color mapping. The external data includes a GeoJSON world topology and a CSV of country population values, loaded asynchronously via `d3.queue`. The map is rendered as an SVG element with a fixed width and height.

Yyvesponcon

84% match

Loading thumbnail…

Untitled

This example presents a choropleth map of global population by country, rendered as an SVG using D3.js v4. It employs a Mercator projection via `d3.geoMercator` and draws country boundaries with `d3.geoPath`. The fill color for each nation is determined by a threshold color scale that bins population values into a blue scheme from `d3.schemeBlues`. Data is loaded asynchronously with `d3.json` for the world GeoJSON topology and `d3.csv` for population figures.

AAaronBhasker

84% match