Activity6_Task2

100%

Activity6_Task2

✓ Published1🌍 Public

Mmaheshchowdaryponnaganti@my.unt.edu

Last edited Apr 11, 2024

Created on Apr 10, 2024

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.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

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

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

94% match

Loading thumbnail…

Activy6-Task3

This stacked bar chart displays the religious composition of populations across the top 20 countries, with each bar segment representing a religion’s population in millions. A color legend allows interactive highlighting: hovering over a religion dims other segments in both the chart and legend. The visualization uses D3’s `flatRollup`, `stack`, `scaleBand`, and `scaleLinear` APIs to structure the data and render the bars, while a custom `colorLegend` module manages the hover interactions. Population data comes from the included CSV file, and the chart is responsive via the `@curran/responsive-axes` library.

Ppravallikachowdary16518@gmail.com

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

89% match

Loading thumbnail…

Activity6_question 2

This interactive stacked bar chart visualizes the population distribution across religious affiliations for 20 countries, sourced from a CSV file. Users can hover over either the legend or the stacked bars to highlight a specific religion, with non-matching segments fading to low opacity. The visualization uses D3's `scaleOrdinal` for colors, `stack()` for creating the stacked segments, and `scaleBand` for the categorical country axis. A custom `colorLegend` module handles the interactive hover states, while `@curran/responsive-axes` manages the axes and labels.

Ssasidhharreddy@gmail.com

89% match

Loading thumbnail…

ACTIVITY 6_TASK_2.1

This stacked bar chart visualizes the estimated religious composition of the 20 most populous countries in 2010. Each bar represents a country, segmented by religion, with a color legend for identification. Hovering over the legend highlights the corresponding segments across all countries. Built with D3, it uses `scaleOrdinal` for colors, `flatRollup` to aggregate data, and `stack` to compute bar segments, with responsive axes from `@curran/responsive-axes`.

Ppasumarthiraghuram21@gmail.com

89% match

Loading thumbnail…

activity 6 question 2

This visualization shows religious demographics across the top 20 most populous countries using a horizontal stacked bar chart, where each bar represents total population segmented by religion and color-coded via an ordinal scale. A linked color legend allows users to hover over religion categories, which highlights corresponding bar segments while fading others and raising the hovered stack. The chart is built with d3-scale’s scaleLinear, scaleBand, and scaleOrdinal, uses d3-shape’s stack for stacking, and implements responsive resizing via @curran/responsive-axes. Data comes from a static CSV detailing population counts per country and religion.

RRakesh Yadav

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

88% match