CV: Stacked Bar Chart with Interactive Color Legend

100%

CV: Stacked Bar Chart with Interactive Color Legend

✓ Published3🌍 Public

Last edited Nov 14, 2025

Created on Nov 14, 2025

This example presents a stacked bar chart visualizing the religious composition of populations across countries, using data from the CSV. An interactive color legend allows users to hover over religions to highlight corresponding segments while dimming others, and clicking a bar selects it with a black outline. Built with React and D3.js v7, the visualization uses `d3.stack` for data processing, `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` for scales, and renders SVG elements with smooth opacity transitions. The chart includes custom axes and labels, leveraging D3's data join mechanism for efficient updates.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

CV: Stacked Bar Chart

This example visualizes religious demographics across countries using a stacked bar chart, where each bar represents a country and colored segments show population counts by religion. Clicking a bar highlights it with a black stroke. The visualization processes CSV data with D3's `group()` and `stack()` functions to create stacked series, rendered as SVG rectangles with `scaleBand` for the x-axis and `scaleLinear` for the y-axis. Built with React and D3 v7, it uses imperative D3 joins within React components for rendering.

CCurran Kelleher

93% match

Loading thumbnail…

TODO D3 Example

This example visualizes the religious composition of the world's 20 most populous countries using a stacked horizontal bar chart. Each bar represents a country's total population segmented by religion, with colors distinguishing religious groups and a legend that highlights specific segments on hover. Built with React and D3.js, it employs `d3.layout.stack` for stacking, `d3.svg.axis` for scales, `d3.legend.color` for the interactive legend, and `d3-tip` for tooltips. Data comes from a CSV file showing population counts per religion and country, rendered as SVG with animated hover effects.

WWarren-Fitzhenry

87% match

Loading thumbnail…

D3 Example

This interactive stacked bar chart visualizes the distribution of religious populations across different countries, using horizontal bars segmented by religion. The visualization leverages D3.js, with d3.layout.stack to create the stacked segments and d3.scale.ordinal for country positioning. Hovering over a country brings up a tooltip displaying the specific religion and population value, while hovering over the color legend dims unrelated segments. The chart uses an SVG rendering approach with a responsive axis and custom legend, drawing from the included religion survey dataset.

Zzhoufangqin

86% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the religious composition of populations across multiple countries, using one bar per country segmented by religion and scaled by population. The visualization loads D3 v3 via CDN, builds the stacked layout with `d3.layout.stack`, and applies ordinal and linear scales for axes. Interactive features include tooltips via d3-tip and a color legend that filters bars on hover, with an overlay rectangle controlling transparency transitions.

LLakshmanRangisetti

86% match

Loading thumbnail…

D3 Example

This stacked bar chart displays the distribution of religious populations across the top 20 countries by total population, using horizontal bars with color-coded religious categories. The visualization uses D3.js version 3, the d3-legend library for the color legend, and d3-tip for hover tooltips. It employs d3.layout.stack for stacking data layers, d3.svg.axis for chart axes, and animated SVG transitions to fade and highlight specific religion segments when hovering over legend items.

Tthemacmarketer

85% match

Loading thumbnail…

ACT6_TASK2.2

This interactive stacked bar chart visualizes religious demographics across countries, showing population distributions by religion for nations like China, India, and the United States. The D3.js v7 visualization uses d3.stack to process CSV data into hierarchical series, with d3.scaleBand for x-axis positioning, d3.scaleLinear for y-axis scaling, and d3.scaleOrdinal for categorical color encoding. Built with React's useContainerDimensions hook for responsive sizing, the visualization renders SVG elements and supports click interactions that highlight the selected country with a black border stroke.

RRevanth putta

85% match

Loading thumbnail…

Stacked Bars

This stacked bar chart visualizes population distribution across countries by religious affiliation, using a horizontal layout where each bar segment represents a different religion’s share. Built with D3.js, the chart encodes categorical data via `d3.scale.ordinal` and `d3.layout.stack`, and supports interactive highlighting: hovering over the color legend dims non-selected layers and re-renders the foreground bars. Animated transitions via `transition.attr` control overlay opacity, while tooltips from `d3-tip` display exact values. The SVG rendering uses axes, a color legend from `d3-legend`, and loads population data from a CSV file.

Pprincit

85% match

Loading thumbnail…

Bar chart Country with religions

This stacked bar chart visualizes population by country, segmented across multiple religions. Built with React and D3.js, it uses `d3.layout.stack` and `d3.scale.ordinal` to construct the bars, with SVG rendering for crisp graphics. Interactive tooltips via `d3-tip` reveal precise values on hover, while a legend (using `d3.legend`) triggers a responsive overlay effect that highlights bars from a selected religion and dims others via animated transparency transitions.

NNita

84% match