Final project

100%

✓ Published0🌍 Public

Last edited Apr 26, 2024

Created on Apr 26, 2024

Forked from SVG

This visualization presents a comparative view of the global COVID-19 pandemic through two side-by-side choropleth maps. One map displays the monthly incidence rate of new COVID-19 cases per 100,000 inhabitants, using a red sequential color scale, while the other shows the vaccination rate using a green scale. Both maps feature a play button and a draggable slider to animate through time from January 2020 to May 2021. The geographic data is rendered using the `d3.geoPath` projection with Natural Earth and TopoJSON, and the temporal data is sourced from Our World in Data.

AI-generated description

MIT Licensed

Similar vizzes

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

86% match

Loading thumbnail…

d3 choropleth map

This choropleth map visualizes the spread of COVID-19 cases over time, with an animating date slider and play/pause controls. The map uses d3.geoEckert5 projection, d3.geoPath, and TopoJSON, with color scales from colorbrewer and d3-scale-chromatic to shade regions by case counts. A draggable slider, built with d3.drag and d3.timeScale, shows daily case data from January to July 2020, while a legend and graticule provide spatial context.

Aashpradhan01123

83% match

Loading thumbnail…

Fork of Circles with D3

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.

SSaipramod Yerra

82% match

Loading thumbnail…

d3 choropleth map

This interactive choropleth map visualizes the spread of COVID-19 cases across countries over time, using an animated timeline that cycles through daily data from January to July 2020. The map renders world country boundaries as SVG paths using the Eckert5 projection, with each country’s fill color dynamically updated based on its reported case count for the currently displayed date. Built with D3 v3, it leverages `d3.geo.path`, `d3.geo.eckert5`, `d3.geo.graticule`, TopoJSON for geographic data, and a CSV dataset, while a play button and date label drive the sequential animation.

Aashpradhan01123

82% match

Loading thumbnail…

Global Pandemic Overview

This visualization presents a global pandemic overview by coloring countries on a natural Earth projection map according to their total COVID-19 deaths. An interactive tooltip displays detailed case statistics for each country on hover, while a color gradient legend indicates the severity scale. Built with D3.js, it uses `d3.geoPath` and `d3.geoNaturalEarth1` for map rendering, `d3.scaleSequential` for the color encoding, and fetches geographic and pandemic data from external JSON and CSV sources.

Wwkj0713@gmail.com

81% match

Loading thumbnail…

Choropleth Map

This choropleth map visualizes the global distribution of COVID-19 cases using a red and green color scheme, with each country’s fill color indicating the presence of cases on a specific date. The map is rendered with SVG using D3’s `geoNaturalEarth1` projection and `geoPath` for geographic outlines, while `zoom` enables interactive panning. Data is loaded from a CSV file and merged with TopoJSON world geometry via `loadAndProcessData`, and a custom `colorLegend` component displays the categorical scale.

NNodirbek Parpibaev

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

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

80% match