My first stacked area chart

100%

My first stacked area chart

✓ Published0🌍 Public

Last edited Nov 7, 2015

Created on Nov 7, 2015

This stacked area chart visualizes U.S. pumpkin and squash production from 1961 to 2013, broken down by world region. Built with D3.js, it uses an ordinal color scale ranging from cream to deep orange, with each region’s production stacked over time. The chart includes hover effects that highlight individual areas in orange, making it easy to compare regional contributions. Data is loaded from a CSV file, and the axes are formatted with time and linear scales, with the source credited to FAO.org.

AI-generated description

Similar vizzes

Loading thumbnail…

My first stacked area chart

CClevejones

100% match

Loading thumbnail…

My first stacked area chart

This stacked area chart shows U.S. pumpkin and squash production from 1961 to 2013, with each colored layer representing a different country’s contribution over time. The chart uses D3’s `d3.layout.stack` to stack the series and `d3.svg.area` to render the filled regions, while `d3.svg.axis` formats the time-based x-axis and linear y-axis. Data is loaded from a CSV file via `d3.csv`, and hovering over a path highlights it in orange. The visualization is styled with a warm cream background and a custom ordinal color scale, with the source cited as FAO.org.

CClevejones

97% match

Loading thumbnail…

My first stacked area chart

This example shows the production of pumpkins and squash across different world regions from 1961 to 2013, using a stacked area chart. The visualization highlights the dominance of Asia, with Europe, the Americas, Africa, and Oceania contributing smaller portions. The chart is rendered as an SVG using D3.js, with data loaded from a CSV file using `d3.csv`. The chart employs `d3.layout.stack` for stacking, `d3.svg.area` for the area shapes, and `d3.time.scale` and `d3.scale.linear` for the axes.

CClevejones

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

70% match

Loading thumbnail…

stacked Cuve Line

A stacked area chart displays U.S. state population by age group, with each layer representing an age cohort and the x-axis ordered by state. The chart is rendered in SVG using D3 v3, with `d3.layout.stack()` to compute cumulative values and `d3.svg.area()` to draw the layers. A draggable legend, built with the `d3-svg-legend` plugin, allows interactive repositioning. Axis labels are rotated via a custom `axisStyle` function, and data is loaded from a CSV file using `d3.csv`.

11Cr18Ni9

70% match

Loading thumbnail…

stacked bar

This stacked bar chart displays fruit production quantities across multiple years, with each bar segment representing a different fruit type. The visualization uses d3.layout.stack() to compute the stacked layout, d3.scale.ordinal() for the x-axis, and d3.scale.linear() for the y-axis. The bars are rendered as SVG rectangles, while textured patterns from the textures.js library—including lines, circles, crosses, and waves—replace solid colors to distinguish the four fruit categories. Axes are drawn with d3.svg.axis(), and tooltips show segment values on mouse movement.

Zzoniyac

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

69% match

Loading thumbnail…

d3.js learning

A stacked bar chart shows the annual production of four fruit varieties—Red Delicious apples, McIntosh apples, Naval oranges, and Anjou pears—from 2006 to 2016. The chart uses d3.v3’s `d3.layout.stack` to flatten the time-series data into cumulative layers, with axes drawn via `d3.svg.axis` and an ordinal time scale for the x-axis. SVG rectangles for each segment include mouseover tooltips displaying individual values, and a legend identifies the color-coded fruit types.

JJoelGallagher

69% match