MAP - CIRCLES — VizHub

100%

MAP - CIRCLES

✓ Published0🌍 Public

Last edited Mar 25, 2020

Created on Mar 25, 2020

A world map visualization traces the spread of COVID-19 by drawing arcs and circles between countries. It shows the progression of the outbreak over time, with each circle representing a country's reported cases and each line indicating a transmission route from one nation to another. The visualization uses d3.geoNaturalEarth1 for the map projection, d3.geoPath for rendering country boundaries, and d3.scaleSqrt for sizing circles based on case counts. Data is loaded from two CSV files containing origin and destination coordinates, which are combined to create the curved connection paths.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

MAP - CIRCLES

This visualization maps the global spread of COVID-19 by showing arcs from origin to destination countries, with circles marking each origin point and labels identifying the source country. The arcs are colored by origin country using a categorical scale, while a text list on the side ranks countries by the number of outgoing transmissions. The code uses `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to draw country boundaries and arcs, and loads geographic data from a TopoJSON world atlas alongside two CSV files containing transmission records.

Iinroadings

94% match

Loading thumbnail…

MAP - CIRCLES

This visualization displays the global spread of a virus through a natural Earth projection map, with circles sized by population at each country's centroid. The D3.js code uses `d3.geoPath` and `d3.geoNaturalEarth1` for the map projection, `d3.scaleSqrt` for circle sizing, and loads data from two CSV files to plot origin-destination arcs. The map also includes a population legend generated with `d3.format` and custom zoom functionality via `d3.zoom`.

Iinroadings

92% match

Loading thumbnail…

MAP - CIRCLES

This visualization maps the spread of COVID-19 from China to other countries using circles overlaid on a natural Earth projection. The size of each circle encodes population data from the source files, while arcs are attempted from longitude and latitude coordinates parsed from two CSV files. Built with D3 v5, it uses `geoPath`, `geoCentroid`, `scaleSqrt`, and `zoom` for interactivity, plus TopoJSON for country boundaries. The SVG rendering includes hover effects and a size legend.

Iinroadings

91% match

Loading thumbnail…

Circles on a Map

Animated circles on a natural Earth projection map visualize COVID-19 confirmed cases and deaths over time, with circle area encoding magnitude. Data is drawn from a temporal CSV and merged with country geometries loaded via TopoJSON. Hovering reveals population figures. Users can pan and zoom, while a color legend distinguishes levels. The visualization uses D3 v5 APIs including `geoPath`, `geoNaturalEarth1`, `scaleSqrt`, `zoom`, and transitions.

Iinroadings

88% match

Loading thumbnail…

Circles on a Map

Circles on a Map visualizes COVID-19 confirmed cases by country as proportional circles overlaid on a natural Earth projection. Circle area encodes case counts via a square-root scale, and hovering highlights country boundaries with a tooltip showing the country name and case total. The visualization supports pan and zoom interactions. Built with D3 v5, it uses `d3.geoPath` with TopoJSON world data, `d3.geoCentroid` for circle placement, and a zoom behavior applied to an SVG group. Population data from the UN and case data from a CSV drive the marks.

Iinroadings

86% match

Loading thumbnail…

Circles on a map

This example visualizes COVID-19 case counts by country on a natural Earth projection map, with circles sized by total cases as of May 16, 2020. Using d3.geoNaturalEarth1 and d3.geoPath, it renders country outlines and positions proportional circles via d3.geoCentroid. A d3.scaleSqrt maps case numbers to circle radii, and a custom size legend (with d3.format) explains the scaling. The map supports zooming through d3.zoom, while country data is joined from a CSV file and TopoJSON world-atlas geometry.

Aacb30

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

86% match

Loading thumbnail…

Circles on a Map

This visualization displays the global distribution of new COVID-19 cases using proportional circles positioned by country centroids on a natural Earth projection. The circle areas encode population data loaded from CSV files, while tooltips reveal exact values on hover. Built with D3 v5, the visualization uses d3.geoPath for map rendering, d3.geoCentroid for positioning, d3.scaleSqrt for circle sizing, and d3.zoom for pan and zoom interactions. A size legend with d3.ticks communicates the scale, and world atlas TopoJSON provides the country boundaries.

YYIN Wanxuan

85% match