ACT6_TASK2.2

100%

✓ Published0🌍 Public

Last edited Oct 26, 2025

Created on Oct 26, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_Task2

This interactive stacked bar chart displays the religious composition of the top 20 countries by population, with each bar segment representing a religion’s population in millions. Users can hover over the color legend to highlight corresponding segments in the chart, which fade non-matching bars. Built with d3.v7, the visualization uses `flatRollup`, `stack`, `scaleBand`, and `scaleLinear` to structure data, while the color legend and chart respond to mouse events updating a shared state. Data comes from a CSV file containing country, religion, and population figures.

Mmaheshchowdaryponnaganti@my.unt.edu

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

88% match

Loading thumbnail…

Task8_Question2

A horizontal stacked bar chart visualizes the proportional distribution of religious populations (in billions) across China, India, and the United States. The chart uses d3.scaleBand and d3.scaleLinear with a d3.axisBottom, encoding each religion with a distinct color from a d3.scaleOrdinal. Hovering a rect triggers a simple opacity change and a custom tooltip via mouseover and mousemove. Data loads from a local CSV using d3, and the visualization renders as SVG, importing D3 v7 from UNPKG.

KKeerthi

88% match

Loading thumbnail…

Activity6_Task2

This interactive stacked bar chart displays the religious composition of the top 20 most populous countries, with each bar segment representing a religion’s population in millions. Built with D3 7.8.5, it uses `scaleOrdinal` for color mapping and `scaleLinear` with `scaleBand` for axes. A hover interaction on the color legend adjusts segment opacity and highlights the selected religion across all bars. Data comes from a bundled CSV file, and the visualization resizes responsively to its container.

Mmanisahiths54321@gmail.com

87% match

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

87% match

Loading thumbnail…

activity 6 task 8

A stacked horizontal bar chart displays population counts for five countries, each bar segmented by religion. The visualization uses D3 v7 with SVG rendering, employing `d3.stack()`, `d3.scaleLinear`, and `d3.scaleBand`. Hovering over a segment triggers a tooltip showing the specific population value for that religion and country. The chart includes a custom legend and axis labels, with data loaded directly from an inline array rather than an external CSV file.

Sskykarthik97@gmail.com

87% match

Loading thumbnail…

Activity 6 Task 2(Interactive Stacked Bar Chart)

This interactive stacked bar chart displays the estimated religious breakdown of the 20 most populous countries in 2010, with population measured in millions. Each country's horizontal bar is segmented by religion, and hovering over a legend item highlights that religion’s segments across all countries while dimming others. The visualization is built using D3.js, utilizing `scaleOrdinal`, `scaleLinear`, `scaleBand`, and the `stack` function to process the CSV data. The legend and chart implement mouseenter/mouseleave events to update the hovered color state, adjusting segment opacity and stroke accordingly.

Mmaheshchowdaryponnaganti@my.unt.edu

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

86% match