Skip to main content
SimilarExport ZIP
100%

activity 6 task 8

✓ Published0🌍 Public
Sskykarthik97@gmail.com
Last edited Apr 11, 2024
Created on Apr 11, 2024
Forked from Hello VizHub

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.

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
89% 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 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…

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

Stacked Bar Chart

Stacked bar charts visualize the distribution of religious populations across fifteen countries. Each bar represents a country’s total population, segmented by religion, with a d3-tip tooltip revealing exact numbers on hover; hovering the color legend highlights a single religion across all countries. The D3.js code uses `d3.nest`, `d3.layout.stack`, and `d3.svg.axis` to stack and scale layers, with SVG animation-driven transitions. Data comes from an embedded CSV, rendered with an ordinal x-scale, linear y-axis, and category10 color scheme.

Aanith462@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…

Stacked Bar Chart

This stacked bar chart visualizes religious population distributions across five countries using data from a CSV file. Each bar segment represents a religious group, with colors assigned via d3.scale.category10 and a legend generated using d3.legend. Hovering over legend items highlights the corresponding layer and displays tooltips with d3-tip. The chart uses d3.layout.stack, d3.nest, and ordinal/linear scales, rendered with SVG and interactive animations.

NNagateja99
86% match
Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the religious composition of populations across multiple countries, with each bar segment representing a different religion’s adherent count. Hovering over a legend item highlights that religion’s segments while dimming others, and tooltips show exact population values. The visualization uses D3.js version 3.5.5 with d3.layout.stack for data stacking, d3.scale.ordinal and d3.scale.linear for axes, and d3.legend for the interactive color legend, all rendered as SVG with hover-based interactivity.

Ssrikkanth05
86% match