Stacked Normalized Horizontal Bar Chart

100%

Stacked Normalized Horizontal Bar Chart

✓ Published0🌍 Public

Last edited Apr 2, 2023

Created on Apr 2, 2023

This stacked normalized horizontal bar chart visualizes the distribution of male and female members across multiple political party groups, with each bar normalized to represent proportions rather than raw counts. The data is sourced from a CSV file containing party names and gender counts. The chart uses D3 v6’s `d3.stack()` with `d3.stackOffsetExpand` for normalization, rendered as SVG rectangles with a color scale distinguishing genders. Interactive tooltips display exact values, while labels show raw counts, and the chart includes a color legend for age categories.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

bar chart

This bar chart displays the distribution of males and females across six age groups, ranging from 20 to 50 years, using a pie chart layout. Built with D3.js v7, it fetches CSV data from a GitHub gist, processes the counts by age group and gender, and renders the visualization as SVG. The chart includes a legend showing total counts per age group and uses an interactive tooltip that appears on mouseover to reveal the specific male and female counts for each slice.

RRakesh Kumar Chekuri

78% match

Loading thumbnail…

Normalized Stacked Bar Chart

A normalized stacked bar chart displays age-group distributions as proportional segments across U.S. states, with each bar totaling 100% to facilitate cross-state comparison. The visualization uses D3 v4’s `d3.stack` with the `stackOffsetExpand` offset, scales via `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles. Data comes from a CSV of state population figures, sorted by the share of residents under 5 years old. A legend and axis with percentage ticks are included, all styled with D3’s default categorical color scheme.

FFrissAnalytics

78% match

Loading thumbnail…

Normalized Stacked Bar Chart

This normalized stacked bar chart displays the percentage distribution of age groups across U.S. states, sorting states by the proportion of their youngest residents. Using D3 v4, it applies `d3.stack` with `stackOffsetExpand` to scale each bar to full height, then renders SVG rectangles with an ordinal color scale for age categories. Axis labels are formatted as percentages, and a custom legend anchored to each bar’s final segment identifies each series. The chart loads population data from `data.csv` and sorts states in descending order of the "Under 5 Years" share.

Mmbostock

77% match

Loading thumbnail…

Normalized Stacked Bar Chart

This example shows survey responses across different frequencies of playing, with each bar normalized to represent the proportion of respondents in each occupational category. The chart uses a stacked bar layout where the total height of each bar equals 100%, making it easy to compare category distributions across the frequency groups. The visualization is built with D3 v4, using `d3.stack()` with `d3.stackOffsetExpand` to normalize the data, and renders the bars as SVG rectangles. The data comes from a CSV file, and the chart includes a legend positioned along the rightmost bar to identify each occupational group.

JJdlv00

76% match

Loading thumbnail…

Radial Normalized Stacked Bar

This radial stacked bar chart displays the age distribution of each U.S. state, with each bar normalized to represent proportions that sum to 100%. The circular layout encodes states around the circumference and uses a radial scale to show percentage values, with concentric grid circles and percentage labels around the center. The chart uses d3.stack with stackOffsetExpand to normalize data, d3.arc for the radial segments, and a custom scaleRadial function that applies a square-root transformation to linear scales. The data comes from a CSV file containing state-by-age population counts.

Mmbostock

76% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the distribution of subgroups across categorical groups, with each bar segment colored by subgroup and stacked to show cumulative values. The visualization is built using D3 v4, loading CSV data from GitHub, and rendering SVG rectangles with a band scale for the x-axis and a linear scale for the y-axis. It uses `d3.stack()` to compute stacked values, `d3.scaleOrdinal` for colors, and includes an interactive tooltip element in the HTML structure.

JJames Huang

75% match

Loading thumbnail…

Normalized Stacked Bar Chart

This normalized stacked bar chart displays each category’s composition as percentages of a whole, using horizontal segments that always fill the full bar height. The code loads a JSON array of time values, computes the satisfied portion by subtracting left hours from total hours, and sorts categories by total descending. Using d3.stack with the stackOffsetExpand offset, it converts raw counts into proportional shares, then renders SVG rectangles via d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis. The legend lines and text are positioned at each segment’s midpoint, while the y-axis labels show percentage ticks.

LLauraCortes

75% match

Loading thumbnail…

Fork of Fork of Fork of Gender Distribution Chart

A stacked bar chart displays the gender distribution of students across university modules, with each bar segmented into male and female counts. Radio buttons allow toggling between absolute counts and percentage proportions, animating the bar segments and y-axis scale via transitions. Built with D3.js version 3, the SVG chart uses `d3.layout.stack` for stacking, `d3.svg.axis` for axes, and form inputs to trigger transitions between count and percentage modes. Data comes from a CSV file containing module names and gender counts.

NNarayana Reddy

74% match