Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Mar 23, 2023

Created on Mar 22, 2023

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Shapes - Stacked Area - streamGraph

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.

SSubhendu Karmakar

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

84% match

Loading thumbnail…

d3.js learning

A stacked bar chart shows the changing counts of four fruit varieties (Red Delicious apples, McIntosh apples, oranges, and pears) across the years 2006–2016. The d3.v3 code builds the visualization from inline JavaScript data using `d3.layout.stack` for layered series, `d3.scale.ordinal` for the time-based x-axis, and `d3.svg.axis` for axes with custom tick formatting. Hovering reveals a value tooltip, and a legend identifies each color-coded segment. The SVG rendering is achieved through appended `<rect>` elements.

Ssafdarawan

82% match

Loading thumbnail…

D3 Data Visualization

This example shows a stacked bar chart of fruit production (Red Delicious apples, McIntosh apples, oranges, and pears) across years from 2006 to 2016. The data is hardcoded in the source, rather than loaded from an external file. The visualization uses D3 v5 with the `d3.layout.stack` function to create stacked layers, `d3.scale.ordinal` and `d3.scale.linear` for axes, and `d3.svg.axis` for drawing ticks. Tooltips display the value of each segment on mouseover. Renders to SVG.

Kkingkwabs

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

82% match

Loading thumbnail…

d3.js learning

This example shows a stacked bar chart tracking fruit quantities (Red Delicious apples, McIntosh apples, oranges, and pears) across years from 2006 to 2015. The visualization uses d3.layout.stack to transpose the data into layers, with an ordinal x-scale for years and a linear y-scale for values. SVG rects represent each segment, colored via a custom palette, while d3.svg.axis renders the axes with gray tick lines. A legend identifies each fruit series, and mouse events on the bars trigger a tooltip displaying the numeric value for that segment.

Ttayyabanisar

82% match

Loading thumbnail…

StackBarChart

This stacked bar chart visualizes fruit quantities across four months, with each bar segment representing apples, bananas, cherries, or dates. The visualization uses React with SVG rendering and leverages D3’s `d3.stack()` with a default offset to compute the stacked series, alongside `d3.scaleBand` and `d3.scaleLinear` for positioning. Color encoding via `d3.scaleOrdinal` with `d3.schemeSet3` distinguishes categories, while the x-axis labels are formatted using the Moment.js library. Data is hardcoded in the script, and axes are generated through a custom `naiveAxes()` function.

Vvoid-LSTM

82% match

Loading thumbnail…

d3.js learning

This example shows a stacked bar chart of fruit production from 2006 to 2015, with four series (Red Delicious apples, McIntosh apples, oranges, and pears) drawn as colored rect layers. The chart uses d3.layout.stack to transform the data, d3.time.format to parse years, and ordinal and linear scales to position the bars and axes. A legend maps colors to fruit names, and a tooltip—created as an SVG group with rect and text elements—displays the numeric value of each segment on mouseover. The SVG is rendered inside a React framework, with axes drawn using d3.svg.axis.

Aanonymous5776

81% match