Covid-19 Map with brushable line chart and interatice bubble

100%

Covid-19 Map with brushable line chart and interatice bubble

✓ Published0🌍 Public

Last edited Oct 2, 2021

Created on Oct 2, 2021

This interactive visualization combines a world map of COVID-19 confirmed cases with a brushable line chart, allowing users to filter the map by selecting a date range. The map uses a natural Earth projection with circle sizes scaled by case counts, while the line chart shows daily totals for either the entire world or a hovered country. Built with React and D3 v5, the chart employs `d3.brushX` for selection and `d3.geoPath` for rendering country boundaries from the World Atlas TopoJSON, with data sourced from the CSSEGISandData COVID-19 time series.

AI-generated description

A world map of the COVID-19 World Confirmed Cases.

Country boundaries from World Atlas TopoJSON.

MIT Licensed

Similar vizzes

Loading thumbnail…

CoronaVirus multiple view with brush

This interactive visualization combines a geographic bubble map with a time-series histogram to explore global COVID-19 death data. A brush on the histogram filters the map’s circles, which represent cumulative deaths per location. The map uses d3.geoNaturalEarth1 projection and d3.geoPath for landmasses, while the histogram employs d3.scaleTime and d3.histogram for binning. Data is loaded via d3.csv from the CSSEGISandData repository, and the React interface manages the linked brushing state.

AAmir

84% match

Loading thumbnail…

Covid-19 Time Series(I Forked)

This interactive map visualizes the global spread of confirmed COVID-19 cases over time, using a world map with proportional orange circles sized by case count for each location. Users scrub through dates via a slider to animate changes in outbreak severity. The visualization loads geographic boundaries from the `world-atlas` TopoJSON feed and pulls time-series data from the Johns Hopkins COVID-19 dataset via `d3.csv`. It employs `d3.geoMercator` for projection and `d3.geoPath` for rendering, with circle radii scaled using `d3.scaleSqrt` and transitions animated through `d3.transition` on the slider input.

ZZY Huang

82% match

Loading thumbnail…

Covid-19

The visualization maps COVID-19 case counts per country on a world map using SVG circles, with circle radius scaled proportionally to the number of cases on March 25, 2020. It displays data from the Humanitarian Data Exchange, sourced from a CSV file containing daily case numbers since January 22, 2020. The map uses D3 v5’s `geoMercator` projection, `geoPath` to draw country boundaries, and `scaleSqrt` for radius scaling. A range slider is present, though the displayed date label shows placeholder text.

CChris Mora

82% match

Loading thumbnail…

Covid-19

This visualization displays the global spread of Covid-19 cases from January 22 to March 30, 2020, using a world map. It plots reported cases as orange circles, with each circle’s radius scaled by the square-root of the case count for a selected date. The map is rendered as an SVG using D3 v5’s `geoPath` and `geoMercator` projections, while case data is loaded from a local CSV file. A slider input allows interactive date selection, though the displayed date label is currently static. Data is sourced from Humanitarian Data Exchange.

Cczy68

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…

COVID-19 DASHBOARD

This interactive dashboard visualizes COVID-19 trends with multiple linked charts, including a world map showing total cases, line charts for new cases by country, and an income-bracket comparison. It also includes a vaccination chart and a navigator for exploring case timelines. Built with React and D3 v7, the visualization uses `d3.geoPath` with TopoJSON for map rendering, `d3.scaleTime` and `d3.scaleLinear` for axes, and SVG with animations for interactive updates. Data is loaded from the Our World in Data COVID-19 CSV files, with country coordinates from a custom JSON file.

Bbhargav83

82% match

Loading thumbnail…

World Map with COVID-19 Data

This visualization presents a choropleth world map color-coded by total COVID-19 cases, with proportional pie charts overlaid on each country to break down cases versus deaths. Built with React and D3 v6, it uses `d3.geoMercator` for projection, `d3.geoPath` to render country boundaries from GeoJSON, and `d3.scaleQuantize` for the color gradient. Hovering a country reveals a tooltip with its name, while each pie chart is generated with `d3.arc` and `d3.pie` with radii scaled by `d3.scaleSqrt`. Data comes from the Our World in Data COVID-19 dataset.

Bbhargav83

81% match

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

81% match