Skip to main content
SimilarExport ZIP
100%

Circles on a Map

✓ Published0🌍 Public
NNkwachi Abel
Last edited Jun 4, 2022
Created on Jun 4, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Choropleth Map

This choropleth map visualizes countries colored by their economy classification, using a spectral color scale to differentiate income groups. The visualization displays country names and classifications on hover via tooltips, with a legend showing the ordinal color mapping. Built with D3 v5, the example uses `geoNaturalEarth1` projection and `geoPath` to render world geography from TopoJSON data, while `scaleOrdinal` with `schemeSpectral` assigns colors. The interactive zoom feature uses `zoom`, and a custom `colorLegend` function draws the legend with SVG circles and text.

CCarloGato
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…

Choropleth Map

This choropleth map visualizes world economies by coloring each country according to its economic classification, using a spectral color scale created with `d3.scaleOrdinal` and `schemeSpectral`. The map renders as an SVG using `d3.geoPath` with the Natural Earth projection, displaying country data loaded from the world-atlas TopoJSON and TSV files. Interactive zooming via the `zoom` event lets users explore regions, while a custom `colorLegend` function shows the categorical color assignments.

RRenato Francia Castillo
90% 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…

Interactive Chloropleath Map

This interactive choropleth map displays global economic classifications by country, with a color-coded legend that filters and highlights selected regions. The map uses D3 v5 with `geoNaturalEarth1` projection, `geoPath` for rendering SVG paths, and TopoJSON data from the world-atlas dataset. Users can click legend categories to emphasize matching countries while dimming others, and zoom/pan the map via D3’s `zoom` behavior. A spectral color scale maps ordinal economy values, with tooltips showing country names and values.

AAjit Singh
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
90% match