Skip to main content
SimilarExport ZIP
100%

Fork of D3 Shapes - Stacked Area - streamGraph

✓ Published1🌍 Public
SSubhendu Karmakar
Last edited Jan 1, 2024
Created on Jan 1, 2024

Four fruit-crop time series stack into a flowing, stream-like area chart with the D3 shape library. The graph displays daily counts for apricots, bananas, cherries, and damsons over ten days, using a wiggle offset and inside-out ordering to create layered ribbons. Distinct fill colors distinguish each fruit, while a Catmull-Rom curve smooths the paths. The SVG visualization is built with `d3.stack`, `d3.area`, and `d3.curveCatmullRom`, rendered through joined `path` elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Shapes - Stacked Area

This stacked area chart displays fruit quantities (apricots, blueberries, cherries) across the days of a work week, with each series normalized to a proportional share using the `d3.stackOffsetExpand` offset. The visualization uses `d3.stack()` to generate the stacked series and `d3.area()` with a linear y-scale to draw the paths into an SVG via D3’s `join` pattern. Three distinct colors represent each fruit, and the code includes comments on alternative `d3.stackOrder` and offset configurations, though only the expand offset is active.

SSubhendu Karmakar
86% match
Loading thumbnail…

D3 Shapes - Stacked Area - .offset(d3.stackOffsetExpand)

A stacked area chart displays five days of fruit quantities, with each day normalized to a full vertical stack using `d3.stackOffsetExpand`, so the y-axis represents proportional shares. Three colored areas—apricots, blueberries, and cherries—are generated with `d3.area()` and rendered as SVG paths inside an SVG element. The data comes from a hardcoded array, and the chart uses `d3.stack()` with keys for each fruit type, mapping each series to a color from a predefined palette.

SSubhendu Karmakar
84% match
Loading thumbnail…

Fork of D3 Starter

This visualization demonstrates a stacked area chart displaying the quantities of apples, bananas, and oranges over three months in 2018. The chart uses D3 v7 with SVG rendering, employing `d3.stack`, `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` to generate and color the layered paths. Data is hardcoded as an array of objects containing month dates and fruit counts. The result shows three distinct colored areas representing each fruit’s contribution to the total count over time, with red, yellow, and orange fills.

JJacobRozak
84% match
Loading thumbnail…

D3 Shapes - Stacked Bar

This stacked bar chart visualizes five days of fruit quantities, with three series (apricots, blueberries, cherries) shown as horizontal segments per day. The chart uses D3 v7’s `d3.stack()` to compute the cumulative y-values for each series, then binds the stacked data to SVG `rect` elements. Series colors are applied via a static array, and day labels are rendered as SVG text. The visualization demonstrates stacking without axes, focusing on the proportional differences between fruit categories across the week.

SSubhendu Karmakar
83% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This example demonstrates a stacked bar chart that visualizes monthly fruit quantities for apples, bananas, and oranges from a CSV dataset. The chart renders as an SVG, using D3 v6 to load the data, stack the series with `d3.stack`, and draw the bars with scales for positioning. A categorical color scale maps each fruit to a distinct color, and a legend is manually appended to identify the categories. The bar heights and positions are computed from the stacked values, with axis margins defining the chart layout.

LLakshmiPrasannaValdas@my.unt.edu
79% match
Loading thumbnail…

1114StackBarChart

This stacked bar chart displays four months of fruit production data, with apples, bananas, cherries, and dates layered from bottom to top. The visualization uses d3.stack() to transform the input dataset into stacked series, then renders each category as a colored SVG rectangle within a group using a data join. Axes are generated with d3.axisLeft and d3.axisBottom, with the x-axis formatted as month-day labels via d3.timeFormat. The chart uses a linear scale for the y-axis and a band scale for the x-axis, with a categorical color scale applying the d3.schemeSet3 palette to distinguish fruit types.

Vvivianaaai@qq.com
79% match
Loading thumbnail…

question 2

This example shows a stacked area chart that visualizes fruit quantities (apples, oranges, bananas) over time, with three semi-transparent colored layers representing each fruit category. The visualization uses D3.js v7 to load CSV data from a GitHub repository, then applies `d3.stack`, `d3.area`, and `d3.scaleBand`/`d3.scaleLinear` to compute and render the stacked areas as SVG paths. Axes with year and quantity labels are added via `d3.axisBottom` and `d3.axisLeft`.

SSowjanya Devupalli
78% match
Loading thumbnail…

Fork of d3.js learning

This stacked bar chart visualizes the relative proportions of four fruit types (redDelicious, mcintosh, oranges, and white) across the years 2006 to 2016. Each bar segment represents the quantity of a fruit per year, with colors mapping each category. The chart uses d3.layout.stack to stack the series, along with d3.scale.ordinal for the x-axis and d3.scale.linear for the y-axis. Axes are rendered with d3.svg.axis, and the SVG output is styled with CSS. The data is embedded as an array of objects in the code.

RRohit-2710
78% match