Skip to main content
100%

Class: Stacking & Nesting

✓ Published0🌍 Public
VVirginiaHNg
Last edited Jul 13, 2017
Created on Jul 13, 2017

A stacked bar chart displays the number of startups in two sectors—consumer and enterprise—per investor, using color to distinguish sectors and hover to reveal individual company names and amounts. The code nests the data by investor and sector with `d3.nest()`, computes stack offsets via `d3.stack()`, and renders SVG rectangles and labels with D3 v4 selections and joins. The data is embedded in the script, with axis positions derived from array indices and bar heights scaled by counts.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Visualization 1 (Stacked Bars)

A stacked bar chart compares total sales across product sub-categories, segmented by customer segment (Consumer, Corporate, Home Office). The chart uses D3.js with the `d3.nest`, `d3.layout.stack`, and `d3.legend.color` APIs to compute the stacked layout and render an interactive legend. Data is loaded from a CSV file (`data(sorted & grouped).csv`). Hover tooltips and a semi-transparent overlay highlight individual segments.

SSarahKiyani
76% match
Loading thumbnail…

Metis: Data Transformation + Nest (sxywu)

This example shows a bar chart of venture investors, where each bar represents one investor and its height encodes the number of unicorn companies in their portfolio. The underlying data is first transformed with `d3.nest()` to group individual investment records by investor, then bound to SVG `<g>` elements using a data join. The chart uses `d3.select`, `enter`, `merge`, and `exit` to manage rectangles and text labels, with scales omitted and positions calculated manually via translation transforms. The bars are drawn as semi-transparent steelblue rectangles, and each label displays the count of investments.

VVirginiaHNg
76% match
Loading thumbnail…

stacked bar

A stacked bar chart displays records published by month in 2015, broken into four categories: Geographic, Dataset, Application, and WebService. The chart uses D3.js (v3.5.5) to load the CSV data from `views.csv`, compute cumulative y-values for each segment, and render colored rectangles per category. An ordinal x-scale maps months, a linear y-scale encodes total counts, and a legend identifies the color-coded categories. The SVG rendering includes axes formatted with the `.2s` tick format and uses `d3.svg.axis` for the bottom and left axes.

MMbrownshoes
74% match
Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays population data for cities, grouped by state and country. It uses D3.js v6 to process the nested dataset with `d3.nest()` and `d3.stack()`, then renders the stacks as SVG rectangles with an ordinal color scale. The chart includes axes via `d3.axisBottom()` and a legend. The data is hardcoded in the script rather than loaded from an external source.

VVenkat-Sumith-Thota
74% match
Loading thumbnail…

Stacked Bar Chart Example

This example shows a stacked bar chart comparing three value series across three categories, with each bar segment stacked vertically and colored blue, green, or orange. The chart renders as an SVG using React and D3 v6, drawing rectangles positioned via a band scale for categories and a linear scale for cumulative sums. The code calls `d3.stack()` with keys for value1, value2, and value3, and appends axes with `d3.axisBottom` and `d3.axisLeft`. The dataset is hardcoded in the script.

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

HTML Starter

This example demonstrates a stacked bar chart built with D3.js v5 and rendered as SVG within a React application. The chart visualizes five data points, each with three numeric keys (p, d, e), using `d3.stack()` to compute layer offsets and `d3.scaleBand()` and `d3.scaleLinear()` for positioning. Rectangles are appended via data joins inside groups, with each layer’s fill color assigned sequentially. The code includes placeholder divs for map and sankey visualizations, though only the bar chart is implemented.

SSophia Murage
74% match
Loading thumbnail…

barStack

The example shows three series of stacked bars, with each series split into positive and negative segments, and toggles between horizontal and vertical orientations. Using D3 v2, the `barStack` function computes cumulative offsets (`y0`) and absolute sizes for each bar, while ordinal and linear scales map data to screen positions. Animated transitions, triggered by a button click, reposition the bars and axes, and the SVG rendering updates smoothly via `transition().duration()`.

ZZJONSSON
74% match