Skip to main content
SimilarExport ZIP
100%

Activity 6-Task 3

✓ Published0🌍 Public
Ppravallikachowdary16518@gmail.com
Last edited Apr 17, 2024
Created on Apr 14, 2024
Forked from Hello VizHub

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.

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…

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
91% 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
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
88% 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
86% 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
86% 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
86% 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…

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
85% match