Skip to main content
SimilarExport ZIP
100%

Activity6_question 2

✓ Published1🌍 Public
Ssasidhharreddy@gmail.com
Last edited Apr 15, 2024
Created on Apr 15, 2024
Forked from Hello VizHub

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.

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
89% 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
89% match
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
89% 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
88% match
Loading thumbnail…

Question 2

This stacked bar chart visualizes religious demographics across the top 20 most populous countries, with population values in millions. The visualization uses D3.js version 7.8.5, employing `scaleOrdinal` and `schemeCategory10` for color encoding, `flatRollup` and `stack` for data aggregation, and `scaleLinear`/`scaleBand` for axes. A color legend provides interactive filtering—hovering a religion name highlights the corresponding segments while fading others. The data comes from the CSV file `religionByCountryTop20.csv`, with responsive layout handled by `observeResize` from `@curran/responsive-axes`.

Eeedaraajay02@gmail.com
87% match
Loading thumbnail…

Activity 6-Task 3

This example presents a stacked bar chart that visualizes the religious demographics of various countries, using population as the quantitative value and religion as the categorical color scale. The chart employs D3.js version 7.8.5, leveraging its `scaleLinear`, `scaleBand`, `flatRollup`, and `stack` APIs to aggregate and structure the data from a CSV file. The visualization includes interactive hover effects on the legend, which highlights corresponding bars in the chart, and the axes are rendered using the `@curran/responsive-axes` module.

Ppravallikachowdary16518@gmail.com
86% match
Loading thumbnail…

Question1

This example displays a stacked bar chart of population by country, segmented by religion, with an interactive color legend that highlights corresponding chart segments on hover. It loads data from a CSV file and uses D3 v5 APIs including `scaleOrdinal`, `schemeCategory10`, and `select`, while relying on `observeResize` from `@curran/responsive-axes` for responsive sizing. The visualization is built through local ES6 modules that separate the chart, legend, and data-parsing logic, with population values converted to millions for readability.

Vvishu.valandas@gmail.com
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
84% match