My Project

100%

✓ Published0🌍 Public

Last edited Mar 24, 2020

Created on Mar 24, 2020

This project visualizes COVID-19 case data on a zoomable natural Earth projection map, with a toolbox interface for filtering different metrics. The visualization uses d3.geoPath and d3.geoNaturalEarth1 to render world countries from TopoJSON data, while a separate chart area and toolbox are built with SVG elements and d3 transitions. Data is loaded asynchronously from the world-atlas and a COVID-19 CSV dataset, and the map supports pan and zoom via d3.zoom.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This interactive map visualizes COVID-19 case data by country, with a control panel that categorizes confirmed cases, recoveries, and deaths into distinct stages. The visualization uses D3.js v5 and TopoJSON to render a world map from Natural Earth data, employing `d3.geoPath` with a natural Earth projection and SVG paths. Users can zoom and pan the map via `d3.zoom`. A drop-down menu allows switching between different dates, and the data appears to come from a CSV dataset tracking the pandemic’s progression through early 2020.

SSarahKiyani

84% match

Loading thumbnail…

Covid-19 cases global data

This visualization displays global COVID-19 case data on an interactive world map using a natural Earth projection, with each country rendered as a green SVG path that turns red on hover. The map uses d3.geoPath with d3.geoNaturalEarth1 for geographic projection, and d3.zoom enables panning and zooming. Country boundaries come from the world-atlas TopoJSON dataset, while country names are joined via the corresponding TSV file. The sphere background is styled blue, and the visualization relies on D3 v5 and topojson.feature to process the geographic data.

Ggcappadaniel

84% match

Loading thumbnail…

Covid19 world map

This visualization presents a world map showing cumulative COVID-19 cases as of June 6, 2021, using a natural Earth projection rendered with SVG via `d3.geoPath`. Circle markers sized by a square-root scale represent case counts per country, while a corresponding size legend and a color legend for missing data are included. The map supports zooming through `d3.zoom`, and tooltips display country names and case totals using `d3.format`. Data is loaded from a CSV file merged with TopoJSON world geometry via `topojson.feature`, with graticule lines and hover effects on country paths.

Mmunpro2002

82% match

Loading thumbnail…

Let's make a map

This interactive map visualizes COVID-19 case and death counts by country, with bubble sizes scaled to total cases and colors indicating severity. Users can zoom and pan using d3.zoom, while hovering over bubbles reveals detailed statistics via tooltips. The visualization combines a Natural Earth projection using d3.geoNaturalEarth1 and d3.geoPath, with geographic data loaded from the world-atlas TopoJSON and COVID-19 statistics from an external dataset. Countries are rendered as SVG paths with hover highlighting, and the animated bubble layer uses d3.scale.sqrt and linear color scales for proportional encoding.

Ssureshreddypr

82% match

Loading thumbnail…

Final Project

This interactive choropleth map displays the worldwide incidence of COVID-19 cases and deaths over time. Users can hover over countries for tooltip details or click to isolate a country, while moving the mouse below the map scrubs through dates from January to May 2020. The visualization uses D3 v5 with `d3.geoNaturalEarth` projections and `d3.geoPath` for rendering the SVG map, with a log-scale color encoding for case counts and a line graph for temporal trends. Data is loaded from external GeoJSON and JSON files.

Pphemmati

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

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

79% match

Loading thumbnail…

CVOID-19 Data

This interactive choropleth map displays cumulative and current COVID-19 case counts by country, with a toggle between the two metrics and a color-coded legend showing case severity bins. Built with D3.js, it uses `d3.geoNaturalEarth1` projection, `d3.geoPath` for rendering country boundaries, and `topojson.feature` for geographic data processing. The map pulls CSV data from a GitHub gist and GeoJSON from andybarefoot’s map data, coloring countries via `d3.scaleOrdinal` with a red sequential scheme. Users click buttons to switch between cumulative and existing (cases minus deaths) patient counts.

Zzhangfa

79% match