Fork of Stacked Bar Chart

100%

Fork of Stacked Bar Chart

✓ Published0🌍 Public

Last edited Jul 21, 2023

Created on Jul 21, 2023

This stacked bar chart compares clothing brands across three categories—Formal, Casual, and Shoes—using d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis. The SVG rendering displays colored bars and a legend, with data from a hardcoded dataset of four brands. The code uses D3 v7, loaded via UNPKG, and demonstrates axis generation with d3.axisBottom and d3.axisLeft, plus a custom legend built from appended rectangles and text.

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

This stacked bar chart compares four clothing brands across three product categories—Formal, Casual, and Shoes—using a fixed dataset embedded in the script. The chart renders in SVG via D3 v7, with `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Each brand’s stacked segments are colored distinctly, with a manual legend built from appended rectangles and text. The code loads D3 from UNPKG and uses inline JavaScript without local modules.

VVenkat-Sumith-Thota

94% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the distribution of product categories—Formal, Casual, and Shoes—across four clothing brands. Each brand’s total value is segmented into three colored bars, with a legend identifying each category. The chart uses D3 v7’s `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `selectAll` to render the grouped rectangles as SVG. The dataset is hardcoded, and colors are assigned via an array of hex codes.

UUVarshaReddy

90% match

Loading thumbnail…

Fork of Stacked Bar Chart Example

This stacked bar chart example shows how three numeric values (value1, value2, value3) accumulate across three categories, with each bar segment colored steelblue, green, and orange. The visualization uses d3.stack() to compute the stacked series and d3.scaleBand with d3.scaleLinear to position rectangles in an SVG. The code renders axes via d3.axisBottom and d3.axisLeft, with dimensions fixed at 400 by 300 pixels. The sample dataset is hardcoded in script.js, and the chart updates purely through D3’s data join, without animation or interactivity.

BBhavanaGIrni

79% match

Loading thumbnail…

Fork of D3 Stacked Barchart Example

This example shows a stacked bar chart where each bar represents a group and is divided into colored segments for three subgroups. The chart loads data from a CSV file hosted on GitHub, then uses `d3.csv` to parse it. The visualization applies `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.stack().keys()` to stack the data by subgroup. Bars are rendered as SVG `rect` elements, with colors assigned via `d3.scaleOrdinal` using a three-color palette. The y-axis is fixed from 0 to 5, and axes are added with `d3.axisBottom` and `d3.axisLeft`.

NNiels Christian Groenlykke

78% match

Loading thumbnail…

Fork of Making a Bar Chart

This example displays a horizontal bar chart of brand ratings from a CSV dataset, with each bar’s length proportional to the rating value. It uses D3 v5’s `scaleLinear` and `scaleBand` for positioning, along with `axisLeft` and `axisBottom` for axes. The SVG is rendered via D3 selections, with margins and labels for the axes. Data is loaded asynchronously with `csv`, and ratings are converted to numbers before rendering. The chart highlights brand comparison, with blue bars and a clean layout.

SSwapna1915

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

78% match

Loading thumbnail…

Stacked_Bar_chart

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.

Ppardha1411

78% match

Loading thumbnail…

Fork of STACKBAR Group Colours

This example presents a horizontal stacked bar chart where each bar represents an animal, and the bar segments correspond to values across four categories (A, B, C, D). The bars are colored by animal group, such as Domestic, Pest, or Marine, using a D3 scale that maps each group to a distinct set of fill colors per segment. Built with D3 v5, the visualization defines linear and band scales for the axes, stacks the data with `d3.stack()`, and renders SVG rectangles. Data loads from a CSV file using `d3.csv` and `d3.autoType`, with axes and a legend drawn via `d3.axisTop` and `d3.axisLeft`.

SsunilthkGmail

77% match