Let's make a map with D3.js!

100%

Let's make a map with D3.js!

✓ Published0🌍 Public

Last edited Jun 13, 2020

Created on Jun 13, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

87% match

Loading thumbnail…

Covid-19 Outbreak Status

This interactive map visualizes the global progression of COVID-19 across countries, using color-coded stages for confirmed cases, recoveries, deaths, and unaffected regions. The visualization presents geo-spatial data with a date selector to explore temporal changes. Built with D3.js, it uses `d3.geoPath` and `d3.geoNaturalEarth1` for map projection, alongside the `d3.dsv` parser to load country data from a CSV file, and `d3.zoom` for interactive panning and zooming. The map is rendered as SVG using TopoJSON world geometry.

SSarahKiyani

86% match

Loading thumbnail…

My Project

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.

DDaniel García

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

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

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

83% match

Loading thumbnail…

coronavirus countries Map

This choropleth map visualizes COVID-19 statistics by country, allowing users to switch between confirmed cases, deaths, and recoveries via a dropdown menu. Country boundaries are rendered with `d3.geoPath` using Natural Earth projection, while circle symbols sized by `d3.scaleSqrt` represent the selected metric at each country’s centroid. Data is loaded from a CSV file and merged with TopoJSON world geometry, with color and size legends providing context. Interactive zooming is enabled through `d3.zoom`.

Pprincit

83% match

Loading thumbnail…

COVID-19

This D3.js visualization shows the progression of COVID-19 cases, deaths, and recoveries over time for a selected country. Users choose a status metric and country via dropdown menus, and the chart displays a smooth line chart of that metric against observation dates. The code uses D3 v5 methods like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG. Data is loaded from a CSV file and aggregated by country and day using `nest` and a custom `groupByDay` function.

WW9183907

83% match