Fork of d3.js learning

100%

Fork of d3.js learning

✓ Published0🌍 Public

Last edited Feb 25, 2021

Created on Feb 22, 2021

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

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

89% match

Loading thumbnail…

d3.js learning

This stacked bar chart visualizes yearly fruit consumption data from a CSV-like dataset, tracking redDelicious apples, McIntosh apples, oranges, and pears. It uses `d3.layout.stack` to compute layered series and `d3.scale.ordinal` for the x-axis years, with SVG rects for bars. Hovering reveals a tooltip with the value via mouse events. A legend identifies the four categories with custom labels, while `d3.svg.axis` renders gridlines and axes.

Ttayyabanisar

89% match

Loading thumbnail…

d3.js learning

Ttayyabanisar

89% match

Loading thumbnail…

d3.js learning

This example shows a stacked bar chart of fruit consumption over time, using d3.v3 with SVG rendering and React integration. The visualization displays four categories (redDelicious, mcintosh, oranges, and pears) as stacked layers, with a tooltip revealing individual segment values on mouseover. The code uses d3.layout.stack() to transpose data, d3.time.format for year parsing, and d3.svg.axis for both x and y axes, building the chart with svg rect elements and a custom legend.

Ssafdarawan

89% match

Loading thumbnail…

d3.js learning

This example visualizes fruit production data for two years as a stacked bar chart using D3.js v3. The chart compares four fruit categories—Red Delicious apples, McIntosh apples, oranges, and pears—across 2006 and 2007, with each bar segment sized by its value. It uses `d3.layout.stack()` to compute stack offsets, `d3.scale.ordinal()` for the x-axis, `d3.scale.linear()` for the y-axis, and renders SVG rectangles for each segment. Mouseover events reveal a tooltip displaying the exact value, while a legend identifies each fruit category.

KKacieW

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

87% match