Fork of Circles with D3

100%

Fork of Circles with D3

✓ Published0🌍 Public

Last edited Apr 26, 2024

Created on Apr 26, 2024

Two synchronized world maps animate COVID-19 new cases per 100,000 people and vaccination rates over time, using sequential red and green color scales to encode values. Each map includes a play button and slider to scrub through dated records, with the choropleth paths colored from CSV data. The visualization uses D3.js version 3 with `d3.geoNaturalEarth2`, `d3.geo.path` for map projection, TopoJSON from the world-atlas package, and ISO country code mappings to join the data.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circles with D3

This interactive map shows total COVID-19 cases per country on a rotating orthographic globe. The visualization uses D3.js with `d3.geoPath` and `d3.geoOrthographic` to project world GeoJSON data, while a sequential red color scale encodes case counts loaded from a CSV file. Users can hover over countries to see exact case numbers in a tooltip, and drag or auto-rotate the globe through `d3.drag` and `d3.timer`.

MMuhammadsaad.khan@vuw.ac.nz

89% match

Loading thumbnail…

Fork of Circles on a map

This visualization displays total COVID-19 cases by country as of August 30, 2020, using red circles sized with d3.scaleSqrt and positioned via d3.geoCentroid and d3.geoNaturalEarth1 projection. The map employs d3.geoPath for country outlines and includes interactive zoom via d3.zoom. A color legend and size legend are rendered as SVG components using React, with data loaded from a CSV time series and TopoJSON world atlas. Hovering reveals country names and case counts through SVG title elements.

JJean David

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

A time-series slider animates the spread of COVID-19 cases across a world map. Red circles, sized with `d3.scaleSqrt` according to confirmed case counts for each date, are positioned using the `d3.geoNaturalEarth1` projection. The visualization uses a slider built with `d3.drag` to scrub through dates, updating circle radii and tooltips. Country boundaries and hover states are rendered with `d3.geoPath`, with data loaded from a CSV of confirmed cases.

HHeechan lee

86% match

Loading thumbnail…

Fork of Circles on a map

This example displays the total COVID-19 cases per country as of August 30, 2020, using circles sized by a d3.scaleSqrt on a world map. The map is rendered with d3.geoPath and a geoNaturalEarth1 projection, while country boundaries come from TopoJSON world-atlas data. Hovering highlights countries, and a size legend with a color legend—built via custom legend components—explains the scaling. The visualization supports zooming and panning through d3.zoom, with SVG circles positioned using d3.geoCentroid and the projection.

TTacue

86% match

Loading thumbnail…

Circles on a Map

This visualization presents daily COVID-19 case data as an animated, zoomable map. Teal circles sized by confirmed cases and red circles for deaths appear over each country, with a date ticker and hover tooltips providing detail. Built with D3.js (v5), it uses `geoPath` and a Natural Earth projection, animating circle radii via `transition()`. Population data comes from a CSV file (`data01.csv`) and country shapes from the VisionsCarto World Atlas TopoJSON.

Iinroadings

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

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