Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a map with D3.js!

✓ Published1🌍 Public
Mmartajimpac
Last edited Dec 14, 2021
Created on Dec 11, 2021

This choropleth map of Spain overlays bubble markers on each province to compare COVID-19 cases and vaccination rates. Circle size encodes case counts via `d3.scaleSqrt`, while fill color uses `d3.scaleSequential` with `d3.interpolateRdYlBu` for vaccination percentages. The map is rendered with `d3.geoMercator` and `d3.geoPath` from TopoJSON data, with interactive tooltips and legend components built from `d3.csv` data and custom SVG groups.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Let's make a map with D3.js!

A choropleth map of Spain displays COVID-19 cases as proportional circles and vaccination percentages via a sequential YlOrRd color scale, with hover tooltips revealing province names. Using d3.csv and d3.json, the visualization merges external COVID data with TopoJSON geographic boundaries from es-atlas. d3.geoMercator projects the map, while d3.geoPath draws province paths, and d3.scaleSqrt sizes circles based on case counts. The d3.scaleSequential color scale encodes vaccination rates, with interactive hover effects changing province fill colors.

Mmartajimpac
94% match
Loading thumbnail…

Fork of CovidCases

This example shows a choropleth map of COVID-19 total cases across Sweden, Denmark, and Norway over time, with a slider to scrub through the available dates. The map uses SVG paths rendered with `d3.geoPath` and a Mercator projection fitted to geographic data from a world GeoJSON file. Each region’s fill color is driven by a `d3.scaleSequential` with `d3.interpolatePlasma`, mapping case counts from a CSV dataset. A tooltip is attached to the paths via mouse events, though it is referenced but not fully instantiated in the provided code, and the slider updates the displayed date label.

Kkfhujosefsson@dons.usfca.edu
78% match
Loading thumbnail…

Fork of Choropleth (Topojson)

This fork of a choropleth map visualizes confirmed COVID-19 cases by department in Argentina, using a logarithmic color scale from pale yellow to deep purple, with a gradient legend and a hover tooltip displaying the department, province, and case count. It employs D3 v5, including `d3.geoPath` and a transverse Mercator projection via `d3-geo-projection`, to render TopoJSON data from a GitHub repository. The map includes interactive zoom (via `zoom` event) and a custom axis for the logarithmic scale.

KKevin Ready
78% match
Loading thumbnail…

Choropleth map

A choropleth map of COVID-19 cases by country, with each nation colored on a spectral scale via `d3.scaleOrdinal` and `d3.schemeSpectral`. Hovering highlights a country in red, and a click-drag zoom uses `d3.zoom` with a Natural Earth projection (`d3.geoNaturalEarth1`) and `d3.geoPath`. Data loads from a CSV and TopoJSON using `d3.csv`, `d3.json`, and `topojson.feature`; a custom color legend renders SVG circles and text.

VVaggelisKlt
76% match
Loading thumbnail…

Choropleth map

This choropleth map visualizes COVID-19 cases, deaths, and recent 14-day case counts by country, using color to encode case numbers and hover tooltips to reveal detailed statistics. The map uses `d3.geoNaturalEarth1` projection with `d3.geoPath` to render world geography, while `d3.scaleOrdinal` with `schemeSpectral` assigns colors to case values. Data is loaded from a TSV file and TopoJSON world atlas, processed with `topojson.feature`, and rendered as SVG paths. A custom color legend and `d3.zoom` are also implemented.

VVaggelisKlt
76% match
Loading thumbnail…

Fork of Fork of Choropleth Map 2

This choropleth map displays COVID-19 vaccination data from a CSV dataset, allowing users to toggle between three metrics via a dropdown menu: fully vaccinated counts, fully vaccinated per 100 people, and total vaccinations. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render world country outlines, with d3.scaleQuantile and d3.schemeYlGnBu assigning color fills based on the selected metric. Data loads asynchronously via fetch and Promise.all, while the topojson-client library converts the world atlas TopoJSON into GeoJSON features. Missing values appear gray, and the map responds to window resizing.

SSeekerzero
76% 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
76% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example renders a choropleth-style map of continental Costa Rican cantons using a Mercator projection. It loads GeoJSON data via `d3.json` and draws the geographic features as SVG paths with `d3.geoPath` and `d3.geoMercator`. The code binds the fetched features to path elements, generating each shape’s outline directly from the GeoJSON geometry. The map uses a minimal styling approach with a full-window SVG and no additional data-encoding layers.

Mmaferayala
75% match