Skip to main content
SimilarExport ZIP
100%

D3 Data Visualization

✓ Published0🌍 Public
Kkingkwabs
Last edited Jul 11, 2020
Created on Jul 10, 2020
Forked from Hello VizHub

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

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
92% 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
92% 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
91% 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
91% 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
90% match
Loading thumbnail…

d3.js learning

This example demonstrates a stacked bar chart built with D3.js, visualizing changes in fruit production (apples, oranges, and pears) over multiple years. The chart uses D3’s `d3.layout.stack` to create the stacked series, `d3.scale.ordinal` for the x-axis, and `d3.svg.axis` for the axes. Hovering over a bar segment reveals a tooltip displaying the exact value. The chart is rendered as SVG, with a legend identifying each fruit series and colors assigned to each category.

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

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