Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited Jan 14, 2021

Created on Jan 14, 2021

This map visualization displays the global distribution of COVID-19 data across countries, with each nation colored according to its economy category using a spectral color scale. The legend shows the color categories with labeled circles, while hovering over a country highlights it in red and reveals its name and economy type in a tooltip. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render the world map from TopoJSON data, and the COVID-19 statistics are loaded from a WHO CSV file. d3.scaleOrdinal and d3.schemeSpectral handle the categorical coloring, while d3.zoom enables panning and zooming.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

86% match

Loading thumbnail…

Circles on a map

This visualization displays the global distribution of total COVID-19 cases as of August 30, 2020, using proportional red circles overlaid on a natural Earth projection map. The map is rendered with SVG, using d3.geoPath for country outlines and d3.geoCentroid to position each circular marker. Circle radii are scaled with d3.scaleSqrt, while a color legend uses d3.scaleOrdinal with a spectral scheme to categorize data. Interactive zooming is enabled through the d3.zoom module, and data is loaded from a CSV file and TopoJSON world atlas using d3.csv and topojson.feature.

VVaggelisKlt

85% match

Loading thumbnail…

Circles on a map

This example visualizes confirmed COVID-19 cases as of August 30, 2020, using scaled circles positioned at country centroids on a natural Earth projection. It renders an SVG world map with d3.geoPath, applies a d3.scaleSqrt for circle radii, and includes interactive pan/zoom via d3.zoom. A color legend uses d3.scaleOrdinal with schemeSpectral, while a separate size legend displays tick marks. Data comes from a CSV time series and TopoJSON world atlas, processed with topojson.feature, with hover tooltips showing country names and case counts.

VVaggelisKlt

84% match

Loading thumbnail…

Circles on a map

This visualization displays total COVID-19 cases per country as of 16/05/2020, with semi-transparent red circles sized by case count using a square-root scale, overlaid on a natural Earth projection map. Countries lacking data appear in light red, while those with data are light gray. The map supports zooming via d3.zoom, and hovering reveals country names and exact case numbers. It uses topojson for world geography, d3.geoPath for rendering, and d3.scaleSqrt for circle sizing, with unemployment data sourced from a CSV. A custom size legend and color legend provide context.

JJorge Emilio Zapata Godoy

84% match

Loading thumbnail…

Circles on a Map

This visualization displays the global population infected by COVID-19, using proportional circles placed at country centroids on a natural Earth projection. The map shows both countries with and without reported data, colored differently, while a size legend and color legend explain the scaling. The implementation uses d3's geoPath, geoNaturalEarth1, and geoCentroid for map projections, and scaleSqrt for circle sizing, with data loaded from a CSV and TopoJSON atlas.

JJhonfel

84% match

Loading thumbnail…

Circles on a map

This example visualizes the global spread of COVID-19 cases on a date in August 2020, plotting semi-transparent red circles on a natural Earth projection map. Circle size encodes case counts using a square-root scale, while hover tooltips show country names and totals. Built with React and D3 v5, it uses `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.geoCentroid`, and `d3.zoom` for navigation, with TopoJSON world data and CSV time-series data from a COVID-19 repository. Custom legends display color and size scales via `d3.scaleOrdinal` and `d3.scaleSqrt`.

VVaggelisKlt

84% match