Skip to main content
SimilarExport ZIP
100%

Circles on a Map

✓ Published0🌍 Public
SSophia Murage
Last edited Apr 10, 2020
Created on Apr 10, 2020

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`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a Map

This visualization displays a choropleth map of global economies, with countries colored by their economic classification using a spectral ordinal scale. An interactive color legend allows viewers to click a category, highlighting matching countries and dimming others, while pan and zoom controls enable map exploration. The map uses D3 v5 with `geoNaturalEarth1` projection, `geoPath`, and `zoom` for navigation, while `scaleOrdinal` with `schemeSpectral` drives the color encoding. Data is loaded via TopoJSON and TSV from the world-atlas package, rendered as SVG paths with hover effects and tooltips showing country names and values.

NNkwachi Abel
92% match
Loading thumbnail…

Circles on a Map

This interactive map colors countries by economic classification using a diverging spectral color scale. Built with D3 v5, it renders a Natural Earth projection via `d3.geoPath` and loads data from the World Atlas TopoJSON and TSV files. A hover effect turns countries red, and the color legend with labeled circles is generated by a custom reusable function. Zooming is enabled through `d3.zoom`, transforming the map group on user interaction.

MMiss-Programmer
90% 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 visualization shows a world map colored by each country's economy category, with a legend displaying the color scale on the left side. The map uses a natural Earth projection, rendered as SVG paths with a blue ordinal color scheme. The code loads geographic data from world-atlas TopoJSON and country metadata from a TSV file, merging them via ISO country codes. Interaction includes zooming via d3.zoom and a hover effect that turns countries red. The color legend is built with custom d3 selections, circles, and text labels.

Aankita1mit
88% 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…

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

Choropleth map

This choropleth map displays countries colored by economic classification using a spectral color scale. Users can click legend items to highlight all countries in that category while dimming others, with zoom and pan via `d3.zoom`. The map is rendered with `d3.geoPath` and `d3.geoNaturalEarth1` projection using TopoJSON data from the world-atlas dataset. A legend, built with custom SVG circles and text, provides interactive filtering, and hover effects change country fill colors.

JJoel Schwartz
87% match