Skip to main content
SimilarExport ZIP
100%

Choropleth Map

✓ Published0🌍 Public
Jjjlaber
Last edited Mar 23, 2023
Created on Mar 23, 2023
Forked from Simple World Map

This example shows a world map rendered as a choropleth using geographic boundaries. It displays landmasses with gray graticule lines, a black outline, and white borders between countries. The code loads GeoJSON data converted from TopoJSON using topojson-client, then renders it with d3.geoPath and a d3.geoNaturalEarth1 projection. It uses d3-geo utilities like geoGraticule and React-like state management through a custom viz pattern.

AI-generated description

A basic world map.

See also:

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth map

This example displays a choropleth map of the world, coloring each country according to its income group using a categorical color scale. The visualization loads geographic data from the World Atlas TopoJSON and TSV files, projecting it with `d3.geoNaturalEarth1` and rendering paths via `d3.geoPath`. A custom legend component uses D3 selections to show color categories. The map supports zoom and pan through `d3.zoom`, and hovering over a country highlights it in red while a tooltip reveals its name and income group.

Rroncando
86% 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
86% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes world countries using a natural Earth projection, with each country filled in light green and outlined in black. The visualization loads geographic data from the World Atlas TopoJSON and TSV files, using `d3.geoPath` and `geoNaturalEarth1` to project and render country boundaries. Countries are colored by their assigned fill, and hovering over a country turns it red, while a tooltip displays the country name. The map includes a blue sphere background and supports zoom interactions through D3’s zoom behavior.

Yylzami40
85% match
Loading thumbnail…

Choropleth Map

This choropleth map displays world countries on a natural Earth projection, colored uniformly with a light green fill on a blue sphere. It uses the `geoNaturalEarth1` projection and `geoPath` from d3 to generate the geographic paths from TopoJSON world data. The visualization supports zooming and panning via the custom `zoom` event, while hovering over a country turns it red. Data is loaded from the world-atlas package, which provides both TSV metadata and TopoJSON geometry.

Ccpsshan
85% match
Loading thumbnail…

Choropleth Map

A choropleth map displays countries with a uniform green fill, turning red on hover while the ocean remains light blue. The visualization uses an orthographic projection, rendering country boundaries as SVG paths via the `geoPath` and `geoOrthographic` functions. It loads world map data from the `world-atlas` package (50m JSON and TSV files) and processes TopoJSON features with the `topojson` library. The `zoom` interaction allows panning and scaling the map through SVG transforms, with country names shown in tooltips.

SSophia Murage
85% match
Loading thumbnail…

Choropleth Map

A choropleth map colors world countries by economic classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral, with a legend rendered via a custom colourLegend component. Geographic shapes are drawn with d3.geoPath and a Natural Earth projection, while data loads from World Atlas TopoJSON and TSV files. Hovering highlights countries, and d3.zoom enables panning and zooming with animated transitions on the legend circles.

JJoseph Popoola
84% match
Loading thumbnail…

word map

This example shows a world map rendered as a choropleth of country boundaries, with a light gray graticule grid and sphere outline drawn behind them. The visualization uses React to manage the SVG output and d3’s `geoEqualEarth` projection, `geoPath`, and `geoGraticule` to construct the geographic shapes, while TopoJSON’s `feature` and `mesh` methods parse the World Atlas dataset for country polygons and interior borders. Country fills use a teal color, and boundary lines are styled via CSS classes.

TTsaiJie
84% match
Loading thumbnail…

World Map

This example renders a world map using the Natural Earth projection, displaying country boundaries and graticule lines. The visualization shows landmasses filled with a teal color, country interiors outlined, and the sphere background in light gray. The code uses React for component structure and d3-geo functions like `geoNaturalEarth1` and `geoPath` to project and draw geographic features. TopoJSON data from the world-atlas package is loaded and converted to GeoJSON using `feature` and `mesh`.

Jjiro2017
84% match