Skip to main content
SimilarExport ZIP
100%

Stacked bar chart

✓ Published0🌍 Public
Ttayyabanisar
Last edited Apr 29, 2020
Created on Apr 28, 2020
Forked from HTML Starter

This example visualizes sales data from the Superstore.csv dataset as a stacked bar chart. It shows the distribution of sales across product categories and segments, with bars stacked to display proportional contributions. The visualization is built using Vega-Lite, Vega, and the Vega-Lite API, with D3’s csv function loading the data. React renders the chart, while Vega-Tooltip provides interactive hover details.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stacked Bars

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.

Pprincit
85% match
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
81% match
Loading thumbnail…

Untitled

A stacked bar chart displays the distribution of sales across three product categories—Furniture, Office Supplies, and Technology—for each city in a Superstore dataset. Users select a customer segment from a dropdown menu and can toggle sorting by total sales or city order via a checkbox. Built with React and D3 v5, the visualization uses `d3.csv` to load data, `d3.stack()` to generate layered bars, and `d3.scaleBand` with `d3.scaleLinear` for axes. Smooth transitions animate changes with `transition.duration`, while labels show the total quantity per city.

SSarahKiyani
81% match
Loading thumbnail…

Untitled

A stacked bar chart displays the distribution of sales across three product categories—Furniture, Office Supplies, and Technology—for each city in a Superstore dataset. Users select a customer segment from a dropdown menu and can toggle sorting by total sales or city order via a checkbox. Built with React and D3 v5, the visualization uses `d3.csv` to load data, `d3.stack()` to generate layered bars, and `d3.scaleBand` with `d3.scaleLinear` for axes. Smooth transitions animate changes with `transition.duration`, while labels show the total quantity per city.

SSarahKiyani
81% 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
80% 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
79% match
Loading thumbnail…

StackedBarChart

This example demonstrates a stacked bar chart built with React, rendering categorical data with sequential segments. It uses the D3.js library to compute stack layouts and scales, while React manages the component structure and SVG rendering. The chart displays bars divided into colored sections, with axes and labels generated through D3’s axis APIs. The code initializes with a simple HTML page, but the main visualization logic is driven by D3’s `d3.stack` and React’s component lifecycle.

BBhavanaGIrni
78% match
Loading thumbnail…

Stacked Bar Graph

This example shows a stacked bar graph where each bar represents a total value composed of three categorical segments, using data from an external CSV file. The visualization renders as an SVG chart with a light gray background, axes, a title, and a color-coded legend. It loads the dataset with `d3.csv`, transforms the columns into numeric values, and uses `d3.stack` to arrange the segments. The chart draws rectangles via SVG and scales the axes using `d3.scaleBand` and `d3.scaleLinear`, with colors assigned by `d3.scaleOrdinal` and `d3.schemeCategory10`.

NNukaShravanKumar
78% match