Gist d6e714e97e5e937623a7

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

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

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

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

HIV/AIDS Choropleth

This chart visualizes global HIV/AIDS prevalence among adults aged 15-49 for the year 2017, using a sequential color scale from yellow to red to indicate severity, with countries lacking data highlighted in red. Built with React and D3 v5, it renders an SVG map using a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, overlaying graticules and country borders from TopoJSON data. The prevalence values are loaded from a CSV file and mapped to each country by name, with a sequential scale (`d3.scaleSequential` and `interpolateYlOrRed`) determining fill colors.

WWaseem Medhat

HIV/AIDS Making a Choropleth Map

This example visualizes the share of the population infected with HIV/AIDS for countries worldwide in 2017, using a choropleth map rendered with SVG paths. Countries lacking data appear gray, while others are colored using a sequential yellow-orange-red color scale via `d3.scaleSequential` and `interpolateYlOrRd`. The map is built with React, D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` for graticules, alongside country boundaries from the world-atlas TopoJSON. Data comes from an IHME CSV joined to numeric country codes via ISO-3166 codes.

MMichael Bergerson

Fork of HIV/AIDS Choropleth Map

This choropleth map visualizes the share of the population infected with HIV/AIDS in 2017, with countries colored according to prevalence rates using a sequential yellow-orange-red color scale. Gray marks countries with missing data. Built with React and D3 v5, the visualization uses the `geoNaturalEarth1` projection, `geoPath` for rendering country boundaries and graticules, and `scaleSequential` with `interpolateYlOrRd` for color encoding. Country shapes come from the World Atlas TopoJSON, while HIV prevalence data is loaded from a CSV file hosted on GitHub.

MMark Baynes

Nice try

This example visualizes the share of the population infected with HIV for the year 2017 as colored points positioned on a world map, with each point representing a single data event. The map uses a Natural Earth projection rendered as SVG paths, with country boundaries and graticules drawn via `d3.geoPath` and `d3.geoGraticule`. Data from the IHME HIV prevalence CSV is loaded and colored through a sequential YlOrRd scale. The React framework coordinates the loading of World Atlas TopoJSON and CSV data, while D3 v5 handles the geographic projections and scales.

Nnexus1058