Circles on the Map

100%

Circles on the Map

✓ Published1🌍 Public

Last edited Mar 30, 2020

Created on Mar 30, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

90% match

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

90% match

Loading thumbnail…

Circles on a Map

This example displays a world map with colored circles positioned over each country, where the circle color encodes the economy category from the UN World Population Prospects dataset. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath, and d3.geoCentroid to place the circles, with a d3.scaleOrdinal color scale and a custom color legend. The map renders in SVG, supports zooming via d3.zoom, and uses topojson for geographic data processing and CSV loading for population statistics.

Jjlspangl

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

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

89% match