Skip to main content
SimilarExport ZIP
100%

Stacked Bars

✓ Published0🌍 Public
Pprincit
Last edited Apr 28, 2020
Created on Apr 27, 2020

This stacked bar chart displays sales totals by product sub-category, with each bar segmented by customer segment. The visualization uses Vega-Lite API with D3.js to load CSV data, aggregate sales values, and render SVG output. Categories are sorted by descending sales, while color encoding differentiates Consumer, Corporate, and Home Office segments. Tooltips provide additional sales details on interaction, and axis labels are customized through the Vega-Lite config object.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Stacked Bars

Stacked bar chart displays sales totals per product sub-category, segmented by customer segment. The visualization uses D3.js with SVG and animated transitions. Data comes from a CSV file containing order records. Hovering over the color legend highlights a specific segment by dimming other layers with a semi-transparent overlay. Tooltips, powered by d3-tip, show exact values for each bar segment. Axis formatting and legend rendering use D3's SVG axis and d3-legend APIs.

Pprincit
94% match
Loading thumbnail…

Stacked Bars

This chart uses stacked bars to show how total sales are divided among customer segments for each product sub-category. The visualization allows users to hover over legend entries, which highlights the corresponding segment’s bars while dimming the rest. The implementation uses d3.svg.axis, d3.nest, and d3.layout.stack to aggregate and stack the data from the CSV file, with bar rendering using SVG rectangles. A d3-tip tooltip displays detailed values on hover. The color legend, built with d3.legend.color, drives the interactive filtering.

Pprincit
93% match
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
87% match
Loading thumbnail…

D3 Example

A stacked bar chart shows Sales across Product Sub-Categories, with bars segmented by Customer Segment, using a categorical color scale. The visualization renders as SVG via D3 v3’s `d3.layout.stack`, `d3.scale.ordinal`, and `d3.svg.axis`, with a legend from d3-legend. Data is loaded from a CSV file containing order details, while axes use a custom SI tick formatter that converts billions to "B".

Pprincit
87% match
Loading thumbnail…

Visualization 1 (Stacked Bars)

This stacked bar chart compares sales across product sub-categories, segmented by customer segment (Consumer, Corporate, Home Office). It displays aggregated sales totals for each sub-category, with each segment represented by a differently colored stack. The visualization uses D3.js version 3 with `d3.layout.stack` to create the stacked layers, `d3.scale.ordinal` and `d3.scale.linear` for axes, and `d3.legend` for a color legend. Animated hover effects and tooltips via `d3-tip` highlight individual segment contributions. Data comes from a CSV file, rendered as an SVG with rotated x-axis labels.

SSarahKiyani
87% match
Loading thumbnail…

Visualization 1 (Stacked Bars)

This stacked bar chart compares sales across customer segments (Consumer, Corporate, Home Office) for each product sub-category, with each bar segment colored by segment. The visualization uses D3.js with SVG rendering and includes an interactive legend that highlights specific segments on hover, supported by tooltips showing exact sales values. The chart animates between two data orderings—first grouping by segment, then reversing to group by sub-category—to reveal different comparative perspectives.

Pprincit
86% match
Loading thumbnail…

Visualization 1 (Stacked Bars)

A stacked bar chart compares total sales by product sub-category across three customer segments (Consumer, Corporate, and Home Office). Mouse hover on a legend item highlights that sub-category’s segment breakdown while dimming the others, with tooltips detailing exact sales values. The visualization uses D3.js (v3.5.5) with the `d3.layout.stack` API, SVG rendering, and the `d3.legend` and `d3.tip` libraries, drawing sales data from a CSV file.

Ssafdarawan
86% match
Loading thumbnail…

Visualization 1 (Stacked Bars)

A stacked bar chart compares total sales by product sub-category across three customer segments (Consumer, Corporate, and Home Office). Mouse hover on a legend item highlights that sub-category’s segment breakdown while dimming the others, with tooltips detailing exact sales values. The visualization uses D3.js (v3.5.5) with the `d3.layout.stack` API, SVG rendering, and the `d3.legend` and `d3.tip` libraries, drawing sales data from a CSV file.

Ssafdarawan
86% match