Skip to main content
100%

Stacked bar chart v4

✓ Published0🌍 Public
Aalexandrospopov
Last edited Jan 31, 2018
Created on Jan 31, 2018

This stacked bar chart visualizes five series across ten samples, with each bar segment colored by series using an ordinal scale. The chart uses D3 v4 with an SVG rendering, positioning bars via a band scale for the x-axis and a linear scale for the y-axis. It builds the stacks with `d3.stack()` and draws rectangles for each segment, using randomly generated data from `d3.range` and `Math.random`.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/8aea86fddcf01380eb96a341509f394f'>Stacked bar chart v4</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Stacked bar chart v4

This stacked bar chart shows ten samples across five series, with each series rendered as a color-coded segment. The visualization begins as a standard stacked bar layout, then animates the rectangles into a grouped arrangement, shifting the bars horizontally and adjusting their heights. Built with D3 v4, the code uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack` to compute the stacked values and transitions. The SVG output is animated using the `d3-transition` library, with random data generated on the fly. The chart highlights how the same data can be represented in both stacked and grouped forms.

MMathReynaud
92% match
Loading thumbnail…

Stacked bar chart v4 - TP3

This example shows a stacked bar chart with five series of ten random values each, rendered as vertically stacked color-coded bar segments. The chart uses D3 v4 APIs including `d3.scaleLinear`, `d3.scaleBand`, `d3.scaleOrdinal`, and `d3.stack` to map data to positions and heights, with SVG rectangles for each segment. The bars are colored via an ordinal palette, and the x-axis is a band scale with a small padding, while the y-axis domain is set to the sample count.

AAlxClt
91% match
Loading thumbnail…

Grouped bar chart v4

This grouped bar chart displays five series of ten random samples each, using color to distinguish the series and vertical bars to represent values. Built with D3 v4, it renders as SVG and uses `d3.scaleBand` for the categorical axes, `d3.scaleLinear` for the value axis, and `d3.scaleOrdinal` for color mapping, with data generated in JavaScript via `Math.random`.

BBaptisteL54
85% match
Loading thumbnail…

Stacked bars

Stacked bars shows four horizontal bars sorted in descending order, each with a cumulative value label at its right edge. The example uses d3.scale.linear for the x-axis range, d3.scale.ordinal with a custom color range for the bars, and d3.selectAll to bind the data array to SVG groups. The code draws rectangles with varying widths based on the data, while text elements display a running total that accumulates as the bars are processed. The data is hardcoded as an array, and the visualization is rendered in SVG with a gray background and black border.

AAlexDaGr8
85% match
Loading thumbnail…

Grouped bar chart v4

This example shows a grouped bar chart with 10 sample categories and 5 series, where each bar height represents a random value between 0 and 1. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleBand` for both the outer category bands and inner series bands, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` to assign a categorical color palette. Data is generated inline using `d3.range` and `Math.random`, with the axes styled via CSS and the chart drawn as nested groups of rectangles translated along the x-axis.

Aalexandrospopov
83% match
Loading thumbnail…

Diverging StackedBar Chart

This example shows a diverging stacked bar chart built with D3 v3, displaying five labeled categories with numeric values. The chart renders as vertical bars with a color scale mapping each category to a distinct color from a predefined palette. It includes axes with a rotated y-axis label and a tooltip that appears on mouseover to show the category label and value. The code uses `d3.svg.axis`, `d3.scale.ordinal`, and `d3.scale.linear` to construct the visualization, with SVG rectangles for the bars and HTML divs for the tooltip. Data is hardcoded in the script, though commented-out code suggests it could also load from a CSV file.

Aabrown004
83% match
Loading thumbnail…

StackedChart

This interactive visualization displays four layers of synthetic time-series data, switching between stacked and grouped bar layouts through animated transitions. Users toggle between modes via radio buttons, with sequenced transitions preserving object constancy as bars morph between the two arrangements. The example uses D3 v3 with SVG rendering, employing `d3.layout.stack` for stacking, ordinal and linear scales for positioning, and chained `transition()` calls with staggered delays to animate rectangle positions, widths, and heights. Colors derive from a linear scale spanning blue-gray tones, while data generation uses a bump function inspired by Lee Byron’s streamgraph test data.

Aadilyalcin
83% match
Loading thumbnail…

Simple Stack

This stacked bar chart displays five categories with three series each, using a simple matrix as its data source. The code relies on d3.layout.stack() to transform the raw matrix into stacked values, then renders rectangles via d3.scale.ordinal for x-positions, d3.scale.linear for heights, and a color scale for series. Console logs expose the matrix-to-stack transformation process, while SVG groups and rects are positioned with negative y-coordinates to build the upward stack from a baseline.

Aanotherjavadude
83% match