paris

100%

✓ Published0🌍 Public

Last edited Nov 23, 2021

Created on Nov 23, 2021

This visualization shows the global prevalence of HIV/AIDS in 2017, with countries colored on a choropleth map using a yellow-to-red sequential scale. The map uses an Equal Earth projection rendered as SVG, with graticules and interior borders. Built with React and D3 v7, the code loads TopoJSON world atlas data and CSV data, then uses d3.geoPath to draw the map and d3.scaleSequential with d3.interpolateYlOrRd to encode prevalence values. Countries without data appear in grey.

AI-generated description

Loading Data with React & D3

MIT Licensed

Similar vizzes

Loading thumbnail…

HIV/AIDS Choropleth Map

A choropleth map visualizes the global share of the population infected with HIV/AIDS in 2017, with countries colored on a sequential yellow-to-red scale based on prevalence rates. Countries lacking data appear in gray. The visualization uses React with D3 v7, employing `geoNaturalEarth1` and `geoPath` for map projection, `topojson` for world atlas geometry, and `scaleSequential` with `interpolateYlOrRd` for the color encoding. Data comes from the IHME HIV prevalence CSV dataset.

TThomas Cormican

85% match

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map shows the global prevalence of HIV/AIDS among adults aged 15–49 in 2017, using a yellow-to-red sequential color scale to indicate infection rates, with missing data rendered in light grey. The visualization loads country geometries from a TopoJSON world atlas and plots them as SVG paths via `d3.geoPath` with an Equal Earth projection. It joins country codes and HIV prevalence data from Our World in Data using React hooks, applying `d3.scaleSequential` and `interpolateYlOrRd` for color encoding.

AAndre J Denais

84% match

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes the global prevalence of HIV/AIDS among adults aged 15–49 in 2017, using a yellow-orange-red sequential color scale to encode infection rates by country. Countries missing data appear in grey. The visualization loads world geometry from TopoJSON via `world-atlas`, joins it with CSV data on HIV prevalence, and renders the map using React with `d3.geoNaturalEarth1` and `d3.geoPath` for geographic projections, plus `d3.scaleSequential` for color mapping.

PPhronesis

84% match

Loading thumbnail…

Fork of Fork of HIV/AIDS Choropleth Map

This visualization displays the global prevalence of HIV/AIDS for the year 2017, mapping each country's infection rate with a yellow-to-red sequential color scale. Country boundaries are rendered as SVG paths using `d3.geoPath` with the Natural Earth projection, while graticules and sphere outlines provide geographic context. The data comes from an IHME CSV file, joined to country shapefiles via ISO numeric codes. Countries without matching data appear gray. The code leverages `d3.scaleSequential` with `interpolateYlOrRd`, processes topojson through the `topojson` library, and uses React hooks (`useState`, `useEffect`) to asynchronously fetch both the atlas and CSV data.

SSahar Ejaz

84% match

Loading thumbnail…

hiv aids choropleth map

This choropleth map visualizes the global share of the population infected with HIV/AIDS for the year 2017, using a yellow-orange-red sequential color scale to indicate prevalence rates. Countries with missing data appear in grey, while the map is projected using d3.geoNaturalEarth1 and rendered as SVG paths. The visualization is built with React and D3 v7, loading world topology from TopoJSON and HIV prevalence data from an IHME CSV. Country codes are matched through a Wikipedia ISO code lookup table to link each dataset.

BBlake McCarty

84% match

Loading thumbnail…

HIV/AIDS with React & D3

This visualization uses a D3 geoEqualEarth projection to render a world map colored by HIV prevalence rates for 2017, with a sequential YlOrRd color scale indicating the percentage of the population aged 15-49 affected. Built with React and D3 v7, the code loads country boundaries and interior lines via the topojson `feature` and `mesh` functions, while CSV data from IHME is joined to map geometries using ISO country codes. SVG paths render the sphere, graticules, and landmasses, with countries lacking data filled in grey.

MManon ROMAIN

84% match

Loading thumbnail…

HIV / AIDS world map vis

This visualization presents a choropleth world map depicting HIV/AIDS prevalence rates for the year 2017. Country boundaries are rendered using the `geoNaturalEarth1` projection and `geoPath` from D3, with graticules and interiors drawn for context. The map is color-coded using a sequential yellow-orange-red scale (`scaleSequential(interpolateYlOrRd)`) applied to AIDS prevalence data, with missing data displayed in gray. The geographic data originates from World Atlas TopoJSON, while the prevalence statistics are sourced from a CSV dataset.

CCatalina Vajiac

84% match

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes HIV/AIDS prevalence by country for the year 2017, with each nation shaded on a yellow-orange-red sequential color scale (`scaleSequential` with `interpolateYlOrRd`). The visualization pairs HIV data from a CSV dataset with country geometries from the World Atlas TopoJSON, mapping numeric country codes to join the data to the map. Countries without matching data appear gray. The SVG rendering uses `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` from d3.v5, with React managing the component lifecycle and state through custom hooks for loading the world atlas, HIV statistics, and country codes.

Aabhijit01

84% match