100%

Fork of Treemap visualization of global high blood pressure rates

✓ Published0🌍 Public

Last edited Jun 5, 2025

Created on Jun 5, 2025

Forked from Treemap visualization of global high blood pressure rates

This interactive map displays global hypertension prevalence among adults aged 30–79 using 2019 WHO data, coloring countries from green (low) to red (high) via d3.scaleSequential and interpolateRdYlGn. Country boundaries render with d3.geoNaturalEarth1 and d3.geoPath, while d3.zoom enables pan and zoom. Hover tooltips report prevalence rates, estimated affected populations, and region. The React app loads CSV health data alongside TopoJSON world geometries, with animations smoothing country transitions.

AI-generated description

Global High Blood Pressure Prevalence Map

This visualization displays global data on high blood pressure (hypertension) prevalence rates among adults aged 30-79 years, based on 2019 World Health Organization data.

Features

Interactive world map showing hypertension prevalence by country
Color scale from green (low prevalence) to red (high prevalence)
Interactive tooltips with detailed country information
Pan and zoom capabilities for exploring specific regions
Responsive design that works across device sizes

Data Source

World Health Organization (WHO), NCD Risk Factor Collaboration - 2019 data

Technologies Used

D3.js for data visualization
React for UI components
TopoJSON for geographical data

Usage

Hover over countries to see detailed information
Scroll to zoom in/out
Click and drag to pan the map

MIT Licensed

Similar vizzes

Loading thumbnail…

Treemap visualization of global high blood pressure rates

This treemap visualizes global high blood pressure rates, showing each country as a rectangle whose area represents the estimated population with high blood pressure and whose color indicates the prevalence rate, using an RdYlGn sequential color scale where darker reds denote higher percentages. The visualization, built with React and d3.v7, uses `d3.treemap()` to compute the hierarchical layout, groups rectangles by world region with labeled headers, and displays country names and prevalence percentages inside each cell. Hover interactions reveal a formatted tooltip with the country, prevalence rate, and affected population. Data comes from the World Health Organization's NCD Risk Factor Collaboration 2019 dataset.

NNita

91% match

Loading thumbnail…

Fork of Fork of Polished World Map

This interactive map visualizes age-standardized hypertension prevalence among adults aged 30-79 across countries, using 2019 WHO Global Health Observatory data. Users can filter results by sex through a dropdown. A sequential blue color scale encodes prevalence percentages, with a gradient legend and hover tooltips displaying exact values. The application is built with React and D3.js (d3.geoPath, d3.geoNaturalEarth1, d3.geoGraticule) to render an SVG world map from TopoJSON data, while d3.scaleSequential and interpolateBlues drive the color encoding.

NNita

88% match

Loading thumbnail…

World Map 2

This interactive choropleth map visualizes the global prevalence of hypertension in 2019, filtered by sex. It uses a blue sequential color scale to encode prevalence values. Built with React and D3, the visualization employs `d3.geoPath` to render an SVG map, with country interactivity for tooltips and highlighting. The legend is generated using `d3.scaleSequential` and `d3.interpolateBlues`. Data originates from the WHO Global Health Observatory, loaded via `d3.csv` and `d3.json`.

MMd Fahimul Kabir Chowdhury

83% match

Loading thumbnail…

World Map

This choropleth map displays the global prevalence of hypertension among adults aged 30-79 years in 2019, with data sourced from the WHO Global Health Observatory. The map uses a blue sequential color scale to represent percentage values, ranging from approximately 15% to 35%, and includes an interactive legend with tick marks. A dropdown menu allows switching between "Both sexes," "Female," and "Male" to filter the displayed data. Built with React and D3 v5, the visualization uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering country boundaries, and SVG paths for map elements. Hovering over a country highlights it and shows a tooltip with the country name and its exact prevalence value.

MMd Fahimul Kabir Chowdhury

83% match

Loading thumbnail…

Fork of heatmap

This visualization explores heart disease prevalence through an interactive choropleth map. It uses D3.js and TopoJSON to render world country boundaries as SVG paths, with a Mercator projection and color encoding showing whether each country has heart disease data. Sliders filter by age range, while zoom and hover tooltips display country-specific details. The dataset comes from a CSV containing heart disease statistics by country and age category.

Sshreyasribearelly@gmail.com

81% match

Loading thumbnail…

Fork of D3: GeoEarth

This interactive choropleth map visualizes global brain and central nervous system cancer deaths for the year 2019, colored using a yellow-to-red sequential scale. Built with React and D3 v7, it uses `d3.geoPath` and `d3.geoNaturalEarth1` for map projection, while `d3.csv` loads the data appended to a TopoJSON world atlas. A legend and hover tooltip, implemented with `d3.select`, show the total death counts per country.

Bbindhureddy98

77% match

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This choropleth map visualizes HIV/AIDS prevalence rates for 2017, shading countries on a natural Earth projection according to the percentage of the population aged 15–49 infected. It uses React with d3.geoPath to render the sphere, graticules, and country boundaries from the World Atlas TopoJSON, while d3.scaleSequential with an interpolateYlOrRd color scale maps prevalence values. Data comes from a CSV of IHME country-level estimates, joined to country codes via ISO-3166 codes, with missing data rendered in gray.

NNelson Kalgushkin

77% match

Loading thumbnail…

Fork of Fork of D3: GeoEarth

This interactive choropleth map visualizes global deaths from brain and central nervous system cancer for 2019, with countries colored on a yellow-to-red sequential scale using d3.scaleSequential and interpolateYlOrRd. The geographic projection is rendered via d3.geoPath with geoNaturalEarth1, while country boundaries come from World Atlas TopoJSON data and mortality statistics are joined from CSV files. A legend and hover tooltip, implemented with React state and D3 selections, display country names and death counts. The visualization uses React to manage the component lifecycle and d3.v7 for data loading, mapping, and SVG rendering.

Bbindhureddy98

77% match