MAP - CIRCLES — VizHub

100%

MAP - CIRCLES

✓ Published0🌍 Public

Last edited Mar 25, 2020

Created on Mar 25, 2020

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

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

MAP - CIRCLES

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.

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

92% match

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

91% match

Loading thumbnail…

Circles on a map

This example visualizes the global spread of COVID-19 in early 2020 using a natural Earth projection map. Circles overlaid on each country represent population size, with a legend showing the scale. The visualization also plots the spread of the virus from country to country based on CSV data of transmission events. The code uses D3 v5 with `geoNaturalEarth1`, `geoPath`, `geoCentroid`, and `scaleSqrt` for the population-scaled circles. It loads TopoJSON for country boundaries, merges CSV data for coordinates, and supports zooming via `d3.zoom`.

Iinroadings

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

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

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

86% match