actvity6-2

100%

✓ Published0🌍 Public

Last edited Apr 17, 2024

Created on Apr 17, 2024

A stacked horizontal bar chart shows the percentage of population in three age brackets—14 years and below, 15 to 64 years, and 65 years and above—across seven global regions. The SVG is built with D3 v7, using `d3.stack()` to compute the stacked segments, `d3.scaleLinear()` and `d3.scaleBand()` for positioning, and `d3.scaleOrdinal()` to assign categorical colors. Interactive tooltips reveal exact percentages on hover. Data comes from a CSV file, with axes labeled and a title displayed above the chart.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_Task2

This stacked horizontal bar chart visualizes the distribution of age groups across different continents, with each bar representing a continent and segments colored by age bracket. The visualization uses a D3.js v7 SVG rendering with `d3.stack()` to compute the stacked segments, `d3.scaleOrdinal()` for color mapping, and `d3.scaleBand()`/`d3.scaleLinear()` for axes. Tooltips, implemented via mouseover events, display the exact percentage for each segment, with x-axis labels indicating percentage values. Data is loaded from a CSV file containing pre-calculated proportions per continent.

Pperamranji

87% match

Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes the percentage of internet usage across five age groups, segmented by region, with each bar normalized to 100%. The visualization uses `d3.stack()` to create the stacked segments and `d3.scaleOrdinal` for color encoding, mapping regions to distinct hues. Interactive tooltips appear on hover, displaying the precise percentage for each region-age combination using `d3.format('.2f')`. The chart leverages `d3.axisBottom` and `d3.axisLeft` with SVG rendering, reading from a `data.csv` file that contains proportional usage values for North America, Europe, Asia, Africa, and South America.

Ggoudrohit2000@gmail.com

85% match

Loading thumbnail…

Fork of Activity8_Question2

A stacked bar chart displays population distribution across seven age groups for each US state, using data from a local CSV file. The chart employs D3 v7’s `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` to render SVG rectangles. Hovering over a bar segment triggers a tooltip showing the state, age group, and exact population value, implemented via mouseover and mouseout events with CSS-styled tooltip divs.

Vvishnupriyapalagiri@gmail.com

83% match

Loading thumbnail…

Fork of Acitivity6 ques 2

This example presents a stacked horizontal bar chart showing population percentages for multiple countries from 1950 to 1955. The visualization loads data from a CSV file and uses D3 v7’s `d3.stack()` and `d3.scaleOrdinal()` with a custom color palette to layer yearly values per country. SVG rendering with `d3.axisBottom` and `d3.axisLeft` displays axes, while interactive tooltips appear on mouseover to reveal exact percentage values, using `d3.select` and event handlers to update a positioned div.

BBhavana Sharma

83% match

Loading thumbnail…

Activity6_Q-2.3

This stacked bar chart shows the proportion of global internet users across six regions—Africa, Asia, Europe, North America, South America, and Oceania—from 2015 to 2019. Using d3.v7 and SVG, it stacks yearly percentage values per region via `d3.stack()`, with bars colored by year through `d3.scaleOrdinal()`. The visualization includes axes generated by `d3.axisBottom()` and `d3.axisLeft()` with percentage formatting, plus a clickable legend. Data comes from the included `internet-users.csv` file, and clicking a bar alerts the region, year, and percentage.

Tthoutunikhitha@gmail.com

82% match

Loading thumbnail…

Acitivity6 ques 2

This example visualizes population data for several countries across the years 1950-1955 using a stacked bar chart. The chart displays population counts on the x-axis and countries on the y-axis, with each bar segment representing a different year. Built with D3 v7 and rendered as SVG, it uses `d3.stack()` to compute the stacked series, `d3.scaleOrdinal` for color encoding, and includes interactive tooltips that display the population percentage for each year segment on mouseover. The data originates from a CSV file loaded locally.

BBhavana Sharma

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

81% match

Loading thumbnail…

Activity 6_Question2.1

This example displays the population distribution across age groups for each U.S. state using a stacked horizontal bar chart rendered as SVG. The viz loads a CSV dataset and maps five age categories to color-coded segments along the x-axis, with states ordered along the y-axis. It relies on d3.stack, d3.scaleOrdinal, d3.scaleLinear, and d3.scaleBand for data transformation and layout, while axes are generated with d3.axisBottom and d3.axisLeft. Labels are formatted as percentages using d3.format.

Ssiddhubhupathi@gmail.com

81% match