Bubble Chart in D3

100%

Bubble Chart in D3

✓ Published0🌍 Public

Last edited Feb 29, 2024

Created on Feb 29, 2024

This bubble chart visualizes the prevalence of AIDS in six African countries, plotting the number of individuals living with the disease on the y-axis against the year on the x-axis. The bubble size encodes the number of new diagnoses, while color distinguishes countries. The visualization uses D3.js v7 with SVG rendering and d3.csv for data loading, d3.scaleLinear for scales, and custom legends for size and color. It includes axes with formatted tick labels and a title, requiring side scrolling due to the chart's dimensions.

AI-generated description

Full dataset from CORGIS

Data provided by UNAIDS (United Nations AIDS Council)

(Side scrolling is required for this visualization)

References:

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 5: Bubble Chart

This bubble chart displays relationships between four HIV-related indicators across 20 countries using a 2020 dataset. The x-axis maps the total number of people living with HIV, the y-axis shows AIDS-related deaths, bubble size encodes new HIV infections, and bubble color represents adult HIV prevalence. The visualization uses D3.js v7 with SVG rendering. The code employs linear scales (`d3.scaleLinear`) for both axes, a square-root scale (`d3.scaleSqrt`) for bubble sizing, and a linear color scale (`d3.scaleLinear`) ranging from light blue to dark navy. Data is loaded from a CSV file using `d3.csv`, with a legend indicating infection and prevalence extremes.

Aamrubal

85% match

Loading thumbnail…

A6 - Bar Chart w/ Sequential Color Scale

This example visualizes new AIDS diagnoses in 2020 for six countries, using a horizontal bar chart where bar height encodes the diagnosis count and a sequential red color scale encodes the same quantitative value. The visualization includes an axis, gridlines, and a legend for the color scale. The chart is built with D3 v7, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential` with `d3.interpolateReds` for the color mapping. The legend is generated via the `d3.legendColor` API. Data comes from UNAIDS via CORGIS.

AAndrew Blakeslee Moore

79% match

Loading thumbnail…

Gist d6e714e97e5e937623a7

This visualization plots each country as a point positioned by latitude and longitude, with circle size representing total population and color indicating HIV/AIDS prevalence. The chart uses D3’s `d3.geoPath` and a geographic projection to place points over a world map background. Data is loaded from a CSV containing country statistics, and hover interactions reveal specific country details. The rendering relies on standard SVG elements with scales for sizing and color encoding, following a scatterplot-over-map approach.

LLTymn

76% match

Loading thumbnail…

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

76% 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

75% match

Loading thumbnail…

Loading CSV Data with D3

A visualization displays HIV/AIDS prevalence rates against other country statistics from a G7 CSV dataset, using D3.js v3 to load and parse the comma-separated values. The example renders an SVG path layer to illustrate data patterns, with each country contributing specific metrics like birth rate and life expectancy. The code demonstrates basic D3 CSV loading techniques within an SVG canvas, showing how raw tabular data can be transformed into visual form.

LLTymn

75% match

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes HIV/AIDS prevalence by country for the year 2017, with a sequential yellow-orange-red color scale (d3.scaleSequential with interpolateYlOrRd) encoding the proportion of the population infected. Countries lacking data are rendered in gray. The map uses a natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath, with country boundaries and graticules from TopoJSON world-atlas data. React manages the component state, while D3 handles data loading from CSV files containing country codes and health statistics, and the SVG is styled with light gray fills for the sphere and graticules.

Mmtabaka

74% match

Loading thumbnail…

HIV/AIDS Choropleth Map

This visualization shows the global prevalence of HIV/AIDS among adults aged 15-49 in 2017, with countries colored on a sequential yellow-orange-red scale from the d3.scaleSequential and interpolateYlOrRd APIs. The map uses d3.geoNaturalEarth1 projection with d3.geoPath to render SVG paths of world countries, with missing data shown in gray. Country codes are matched via a lookup table from a CSV file, and the choropleth is built using React components that fetch data with d3.csv and d3.json.

JJenny

74% match