Skip to main content
SimilarExport ZIP
100%

A6 - Bar Chart w/ Sequential Color Scale

✓ Published1🌍 Public
AAndrew Blakeslee Moore
Last edited Mar 5, 2024
Created on Mar 5, 2024
Forked from HTML Starter

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.

AI-generated description

Full dataset from CORGIS

Data provided by UNAIDS (United Nations AIDS Council)

(Side scrolling for legend)

References:

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 bar sequential

This example visualizes the distribution of infectious diseases in 1968 using a sequential bar chart, with each bar’s height and color intensity encoding the number of infections. The chart employs a sequential color scale based on ColorBrewer’s OrRd scheme, mapping values from 0 to 150,000, and includes a legend generated with the d3-legend library. The visualization is rendered as SVG using D3 v6, with axes, labels, and a dark background for contrast. The data, simplified from the CORGIS Global Development dataset, is loaded from a CSV file, and the chart uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the quantitative y-axis.

AAndrew
82% match
Loading thumbnail…

Ass8_Question4

This example visualizes the prevalence of AIDS in six African countries using a bubble chart, plotting the number of individuals living with AIDS against the year. Each bubble’s size represents the number of new diagnoses, and its color corresponds to the country via a custom color scale, with a legend for both size and color. The chart is built using D3 v7, loading CSV data from a GitHub gist, and employs `d3.scaleLinear` for positioning and radius, `d3.axisBottom` and `d3.axisLeft` for axes, and SVG circles for rendering.

AAbdul Kareem
81% match
Loading thumbnail…

Fork of d3 bar sequential

This bar chart shows the distribution of disease types in 1968, using a sequential color scale to encode the number of infections from light to dark orange. The chart displays each disease category as a separate bar, with the color intensity reflecting the infection count. Built with D3 v6, the visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential` with the ColorBrewer OrRd scheme to map values to colors. A legend, created with the d3-legend library, accompanies the chart, and the data is loaded from a CSV file. The SVG rendering includes labeled axes for disease type and infection numbers, with the chart styled on a black background.

Eeya.chaabani99@gmail.com
80% match
Loading thumbnail…

Bubble Chart in D3

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.

AAndrew Blakeslee Moore
79% 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
78% match
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
78% match
Loading thumbnail…

A6 Sequential Color Barchart

This example visualizes total cancer deaths by U.S. state using a sequential color barchart. The bars encode the death count by height while their color reflects the death rate per 100,000 people, ranging from light to dark red. Hovering over a bar reveals precise values via a native title tooltip. The chart is built with D3 v7, using `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.scaleSequential` with `d3.interpolateReds` for color, and the `d3-legend` plugin to display the color threshold legend. Data comes from the CORGIS dataset, rendered as SVG.

NNoah C.
78% match
Loading thumbnail…

task_4_questions

This bubble chart visualizes the prevalence of AIDS across six of the most-infected countries, plotting years on the x-axis, the number of individuals living with AIDS (in thousands) on the y-axis, and new diagnoses as bubble radius. The visualization uses D3.js v7 with SVG rendering, employing `d3.scaleLinear` for axes and bubble sizing, `d3.extent` for domain calculation, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.format` for number labeling. Data comes from the CORGIS AIDS dataset, provided by UNAIDS. The chart includes a legend for both bubble size and country-specific colors, with side scrolling required to view the full visualization.

HHarinathChakali33@gmail.com
78% match