Stacked_Bar_chart

100%

Stacked_Bar_chart

✓ Published0🌍 Public

Last edited Jul 21, 2023

Created on Jul 21, 2023

This example presents a stacked bar chart of randomly generated product sales data across six months. The chart visualizes sales for ten product categories, with each bar segmented by month using a categorical color scheme. Built with D3.js v7, the code generates data on the fly and renders the visualization as an SVG. The implementation uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.schemeCategory10` for color assignment, along with D3's axis helpers for labeling.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stacked Bar Chart with D3.js

This stacked bar chart visualizes monthly sales data for ten products, with each bar segmented by month. The example uses D3.js v7 to generate random data, render SVG rectangles for the bars, and apply `d3.scaleBand` and `d3.scaleLinear` for positioning. Color encoding via `d3.scaleOrdinal` with `d3.schemeCategory10` distinguishes months, while axes, labels, and a legend are added using `d3.axisBottom` and `d3.axisLeft`.

Ssaikrishnabussa

90% 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

82% match

Loading thumbnail…

D3 Layouts - Stacked bar chart

This example shows a stacked bar chart built with D3.js, using the `d3.stack` API to arrange three categories—apples, oranges, and grapes—into cumulative segments for five data groups. The visualization renders directly to an SVG element, with each stacked segment colored via `d3.scaleOrdinal` and the `d3.schemeCategory10` palette. A band scale positions the bars horizontally, while a linear scale maps the cumulative totals to the chart’s height, with the stacking order sorted descending. The input dataset is a hardcoded array of objects.

KKaustav Sen

82% match

Loading thumbnail…

StackBarChart

A stacked bar chart displays four months of fruit production data, with each bar segmented into stacked categories (apples, bananas, cherries, dates) and colored using the d3.schemeSet3 ordinal color scheme. The chart uses d3.stack() to compute cumulative values for the stacked segments, then renders the bars as SVG rectangles via a data join with g and rect elements. The x-axis uses a time scale formatted with d3.timeFormat, while the y-axis uses a linear scale with .nice() rounding. Axes are drawn with d3.axisLeft and d3.axisBottom, and the chart is set within a 1600x800 SVG element.

Vvivianaaai@qq.com

82% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays three categories (category1, category2, category3) across three groups: Economy, Business, and First Class. The visualization uses D3 v7 to render SVG rectangles, with each bar segment stacked vertically using the `scaleBand` and `scaleLinear` scales. The code defines the data in a JavaScript array and applies `d3.axisBottom` and `d3.axisLeft` to generate the x and y axes. Color-coded segments (blue, orange, green) represent each category, showing their proportional contributions to the total value per group.

Ssaipaidipalli

81% 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

81% 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

81% match

Loading thumbnail…

bar grapgh

This bar chart displays total sales across product categories, with each category represented by a colored bar on a band scale. The visualization uses D3.js v7 to load CSV data from a GitHub gist, map it into an array of category-total pairs, and render an SVG chart with axes, labels, and a legend. The code applies a sequential color scheme via `d3.scaleOrdinal` with `d3.schemeCategory10`, and uses `d3.axisBottom` and `d3.axisLeft` for the axes. A title and rotated category labels are included to improve readability.

SSai Hemanth Babu Sunkari

81% match