Skip to main content
100%

Normalized Stacked Bar Chart - Race

✓ Published0🌍 Public
Aajayk1931
Last edited Feb 10, 2017
Created on Feb 9, 2017

A normalized stacked bar chart displays the percentage distribution of college degree types across four racial categories, using data from the US Census Bureau’s 2008 Survey of Income and Program Participation. Each bar represents a race, with segments for Associate’s, Bachelor’s, Master’s, Professional, and Doctorate degrees scaled to total 100%. Built with D3 v4, the chart uses `d3.stack()` with `stackOffsetExpand` for normalization, `d3.scaleBand` for the x-axis, and `d3.scaleOrdinal` with `schemeCategory10` for color encoding. An SVG render includes a legend and percentage-scaled y-axis.

AI-generated description

This visualization is a normalized stacked bar chart that shows the percentage of people who have attained various levels of college degrees across the different races. The percentages are based on total number of people of a particular race who have obtained some college degree.

Data Source: Table 1A of What It's Worth: Field of Training and Economic Status, US Census Bureau, Survey of Income and Program Participation, 2008 Panel.

Visualization modified from <a href = https://bl.ocks.org/mbostock/3886394>Mike Bostocks</a> normalized stacked bar chart example.

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

Normalized Stacked Bar Chart

This example demonstrates a normalized stacked bar chart built with D3 v4, jQuery, and Underscore.js, rendering to SVG. The chart reads a CSV file containing any number of groups and up to eight categories, then calculates each category's percentage of the row total in JavaScript before drawing. The x-axis uses a linear scale from 0 to 100 percent, and each horizontal bar is subdivided into colored segments representing categories, with labels for values above 5%. A total row is computed dynamically and appended to the bottom of the chart, and a legend displays the category colors. The visualization is implemented without D3's stack layout, manually positioning the rectangles.

663anp3ca
75% match
Loading thumbnail…

Fork of Fork of Activity6_Task3

This visualization uses a stacked horizontal bar chart to show the percentage of bachelor's degrees earned by Asian, Black, and White students across U.S. states. The code processes the provided data to calculate proportions and uses D3.js (v7) to render the chart as an SVG. It employs `d3.stack()` to create the stacked series, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with a color range to distinguish the three racial groups. A legend and axis labels are added for clarity.

Ssahithitoomu@gmail.com
74% 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
74% match
Loading thumbnail…

Grouped Bar Chart - Age

This grouped bar chart compares the number of people aged 25 and over who have attained various college degrees, broken down by age brackets from 25–34 through 65 and over, using data from the US Census Bureau’s Survey of Income and Program Participation. Five education levels—from associate’s to doctorate—are shown side by side for each age group, with population counts in thousands. The visualization uses d3.csv for data loading, d3.scaleBand for x-position and grouping, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with d3.schemeCategory10 for color encoding. Axes are rendered with d3.axisBottom and d3.axisLeft, and values are formatted using d3.format.

Aajayk1931
74% match
Loading thumbnail…

Fork of Activity6_Task2

This visualization displays the percentage of bachelor's degrees earned by Asian, Black, and White residents across U.S. states, with each state represented as a horizontal stacked bar showing the proportional share of each ethnic group. The chart uses d3.stack() to compute the stacked series, d3.scaleBand() for the categorical state axis, and d3.scaleLinear() for the percentage axis. Rendering is done via SVG rectangles within a D3 v7 selection, styled with a color ordinal scale and annotated with axes and a legend.

Ssahithitoomu@gmail.com
74% match