Circles on a map

100%

Circles on a map

✓ Published0🌍 Public

Last edited Apr 9, 2024

Created on Apr 9, 2024

This example displays a choropleth map of the world colored by income group, with a legend showing the color categories. The map uses a natural Earth projection and is rendered with SVG paths via d3.geoPath. A color legend built with a custom function displays ordinal color swatches. Users can pan and zoom the map using d3.zoom, while the data combines TopoJSON world geometries with CSV population estimates.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on Map

This example displays a natural Earth choropleth map with circles sized by population, colored by a categorical scale, and overlaid with a clickable legend. It uses TopoJSON world-atlas data and CSV population figures merged by country ID, rendered as SVG paths via `geoPath` and `geoNaturalEarth1`. Users can zoom with `d3.zoom` and filter countries by clicking legend colors, dimming non-matching regions. The code applies `scaleOrdinal` with `schemeSpectral` and projects centroids from geographic coordinates.

Iinroadings

89% match

Loading thumbnail…

Circles on the Map

This example displays a world map with countries colored according to their economic classification, using a categorical color scale with a legend rendered as circles. It loads world geometry from TopoJSON and metadata from TSV files, then projects the map with `d3.geoNaturalEarth1` and renders it as SVG paths via `d3.geoPath`. A `d3.zoom` behavior enables panning and zooming, while the color legend is built with a custom function that updates scales and ticks. The visualization uses `d3.scaleOrdinal` with the `schemeSpectral` palette and supports hover highlighting through CSS.

Pprincit

89% match

Loading thumbnail…

Circles on a Map

This example displays world country outlines colored by population data from the UN, overlaid with a custom color legend. The map uses d3.geoNaturalEarth1 for projection and d3.geoPath to render geographic features, with zoom interaction via d3.zoom. Circles positioned using d3.geoCentroid appear on country centers. The legend demonstrates a reusable d3 module with SVG rendering, while data loads through d3.csv and d3.json with topojson.feature.

PPiotr Paszek

88% match

Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by income group using an ordinal color scale with a spectral scheme. The visualization supports pan and zoom interactions through d3.zoom, while d3.geoPath and a Natural Earth projection render the geographic shapes. A custom color legend component displays the categorical colors with labeled circles. Country names and income groups appear as tooltips via SVG title elements, with data loaded from the world-atlas TopoJSON and TSV files.

Aanouckstbr@gmail.com

87% match

Loading thumbnail…

Circles on Map

This example displays a world map colored by each country's economy classification, with a color legend showing the categorical scale. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render the map from TopoJSON data loaded via topojson, while d3.scaleOrdinal with schemeSpectral assigns colors to economic categories. The map supports zooming through d3.zoom, and hovering highlights individual countries in red. A custom colorLegend component renders the legend as SVG circles with text labels, and the sphere background is filled with blue.

Mmaxthamt

87% match

Loading thumbnail…

Circles on a Map

This example displays a world map where each country is filled with a color based on its economy data from a UN dataset. Circles in a legend on the left indicate the color scale. The map uses the `geoPath` and `geoNaturalEarth1` projections from D3 v5, while the `topojson` library’s `feature` function processes the world atlas data. Country choropleth colors are set by a ternary, and the visualization supports zooming via the `zoom` API.

CCassie

87% match

Loading thumbnail…

Choropleth Map

This example displays a world map as a choropleth, with each country colored by its income group using an ordinal color scale and a custom SVG legend. D3’s `geoNaturalEarth1` projection and `geoPath` render geographic boundaries from a TopoJSON source, while data from a TSV file is joined by country ID. Hovering a country turns it red and shows its name and income group in a tooltip, and pan/zoom interaction is enabled via a custom zoom event.

Ccpsshan

87% match

Loading thumbnail…

Circles on a Map

This visualization displays a choropleth map of countries colored by economic classification, with an interactive color legend that filters highlighted regions. The map uses the Mercator projection through `d3.geoMercator` and renders geographic paths via `d3.geoPath`. Users can click legend circles to highlight matching countries, which are drawn using a categorical `scaleOrdinal` with the `schemeSpectral` color range. Data comes from a CSV file joined with TopoJSON world atlas features, and the entire SVG view supports pan and zoom through `d3.zoom`.

SSophia Murage

87% match