Skip to main content
SimilarExport ZIP
100%

HIV/AIDS with React & D3

✓ Published1🌍 Public
MManon ROMAIN
Last edited Oct 24, 2021
Created on Oct 24, 2021

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.

AI-generated description

Loading Data with React & D3

MIT Licensed

Similar vizzes

Loading thumbnail…

React world HIV/AIDS map

A React-based choropleth map visualizes global HIV/AIDS prevalence among adults aged 15-49 for the year 2017, using a yellow-to-red sequential color scale to represent the percentage of infected populations. The map renders geographic boundaries via topojson world atlas data and d3.geoPath with a geoNaturalEarth1 projection, while graticule lines and borders provide spatial context. Countries lacking data appear gray. The visualization loads HIV prevalence statistics from an IHME CSV dataset, merges them with ISO country codes, and displays tooltips revealing country names on hover.

SSuperShreejit
91% match
Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This choropleth map visualizes HIV/AIDS prevalence among adults aged 15–49 in 2017, with countries colored on a yellow-to-red sequential scale based on infection rates. It uses D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to render world boundaries and graticules. The React-powered application merges HIV data from IHME with ISO country codes, mapping each nation by numeric code. Countries without matching HIV data appear gray. The visualization is built with D3 v5, React, and TopoJSON, sourcing country shapes from World Atlas TopoJSON.

GGuilinabaoge
90% match
Loading thumbnail…

HIV/AIDS Choropleth Map

This visualization displays a choropleth world map of HIV/AIDS prevalence rates among adults aged 15-49 for the year 2017, using a yellow-to-red sequential color scale. The map renders country boundaries from World Atlas TopoJSON through `d3.geoNaturalEarth1` and `d3.geoPath`, with graticules and interiors drawn as separate SVG paths. React manages the data loading and state, pulling HIV prevalence statistics from an IHME CSV and mapping alpha-3 country codes to numeric identifiers via a supplementary ISO-3166 dataset. Countries without matching data appear gray.

MMaxwell Dayvson da Silva
90% match
Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes the global share of the population infected with HIV/AIDS for 2017, using color intensity to convey prevalence across countries. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` to render country boundaries and graticules from World Atlas TopoJSON data. The color scale, a sequential YlOrRd scheme, maps each country’s infection rate to a fill color, while missing data is shown in gray. Data comes from the IHME HIV/AIDS prevalence dataset, loaded via `d3.csv`.

Ee-ines
89% match
Loading thumbnail…

HIV/AIDS choropleth map

This choropleth map visualizes the global share of the population aged 15–49 infected with HIV/AIDS in 2017, using a yellow-orange-red sequential color scale. It renders country polygons via `d3.geoEqualEarth` and `d3.geoPath`, with graticules and interior boundaries drawn from TopoJSON world atlas data. Data comes from the IHME HIV/AIDS prevalence dataset, joined to country codes via the ISO-3166 slim CSV. React components manage state and loading, while D3 v5 handles projection, geospatial path generation, and color scaling.

33ssalunke
89% match
Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

A choropleth world map displays the share of the population infected with HIV/AIDS for the year 2017, shaded with d3.scaleSequential and interpolateYlOrRd. Missing countries appear gray. The visualization uses React with custom hooks to load and merge data from the IHME HIV prevalence CSV and ISO country codes, joining them by numeric codes. d3.geoNaturalEarth1 projection and d3.geoPath render the map, with graticules and interiors from d3.geoGraticule and topojson mesh.

88DancingElephants
89% match
Loading thumbnail…

Dataviz 2020_Ep48 - 38. Choropleth Map - (React, D3 - HIV/AIDS data)

This choropleth map visualizes the global share of the population infected with HIV/AIDS for the year 2017, using a yellow-to-red sequential color scale to encode prevalence rates. Countries with missing data appear in gray. The visualization is built with React and D3 v6, using `geoNaturalEarth1` and `geoPath` for map projection, `geoGraticule` for grid lines, and `topojson` to convert world atlas data into GeoJSON features. It renders as SVG, pulling HIV prevalence data from an IHME CSV dataset.

MMinwoo Pak
89% match
Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes HIV/AIDS prevalence rates among adults aged 15-49 for 2017, using a sequential yellow-orange-red color scale applied to country polygons. The visualization pairs a React front end with D3 v5’s `geoEquirectangular` projection and `geoPath` to render SVG shapes, while `topojson` features and meshes define country boundaries and interiors. Data from the IHME dataset is joined to world atlas geometries via ISO country codes, with missing regions colored gray. The map includes graticules and a white sphere background for geographic context.

Ssmile2git
89% match