Skip to main content
SimilarExport ZIP
100%

Visualization 1 (Stacked Bars)

✓ Published1🌍 Public
Ssafdarawan
Last edited Jun 1, 2020
Created on Jun 1, 2020

This stacked bar chart compares sales across product sub-categories, broken down by customer segment (Consumer, Corporate, Home Office). The visualization uses D3.js to render an SVG with animated transitions, where hovering over a color legend highlights a specific segment's bars. It employs `d3.layout.stack`, `d3.scale.ordinal`, and `d3.legend.color` to structure and annotate the data, which is loaded from CSV files containing sales figures. Tooltips via `d3-tip` display exact values on interaction.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Visualization 1 (Stacked Bars)

This stacked bar chart compares sales across product sub-categories, segmented by customer segment (Consumer, Corporate, Home Office). It displays aggregated sales totals for each sub-category, with each segment represented by a differently colored stack. The visualization uses D3.js version 3 with `d3.layout.stack` to create the stacked layers, `d3.scale.ordinal` and `d3.scale.linear` for axes, and `d3.legend` for a color legend. Animated hover effects and tooltips via `d3-tip` highlight individual segment contributions. Data comes from a CSV file, rendered as an SVG with rotated x-axis labels.

SSarahKiyani
98% match
Loading thumbnail…

Visualization 1 (Stacked Bars)

A stacked bar chart compares total sales by product sub-category across three customer segments (Consumer, Corporate, and Home Office). Mouse hover on a legend item highlights that sub-category’s segment breakdown while dimming the others, with tooltips detailing exact sales values. The visualization uses D3.js (v3.5.5) with the `d3.layout.stack` API, SVG rendering, and the `d3.legend` and `d3.tip` libraries, drawing sales data from a CSV file.

Ssafdarawan
97% match
Loading thumbnail…

Visualization 1 (Stacked Bars)

A stacked bar chart compares total sales by product sub-category across three customer segments (Consumer, Corporate, and Home Office). Mouse hover on a legend item highlights that sub-category’s segment breakdown while dimming the others, with tooltips detailing exact sales values. The visualization uses D3.js (v3.5.5) with the `d3.layout.stack` API, SVG rendering, and the `d3.legend` and `d3.tip` libraries, drawing sales data from a CSV file.

Ssafdarawan
97% match
Loading thumbnail…

Visualization 1 (Stacked Bars)

This stacked bar chart compares sales across customer segments (Consumer, Corporate, Home Office) for each product sub-category, with each bar segment colored by segment. The visualization uses D3.js with SVG rendering and includes an interactive legend that highlights specific segments on hover, supported by tooltips showing exact sales values. The chart animates between two data orderings—first grouping by segment, then reversing to group by sub-category—to reveal different comparative perspectives.

Pprincit
96% match
Loading thumbnail…

Visualization 1 (Stacked Bars)

A stacked bar chart compares sales across customer segments and product sub-categories, using color to distinguish sub-categories within each segment. The visualization is rendered with D3.js (version 3.5.5) and uses d3.layout.stack to create the stacked layers, while d3.legend provides the interactive color legend. Hovering over a legend entry highlights that sub-category’s bars and fades the rest, and d3-tip displays exact sales values on hover. The chart animates and reads from a CSV containing individual sales records.

Ssafdarawan
96% match
Loading thumbnail…

Visualization 1 (Stacked Bars)

A stacked bar chart compares total sales across product sub-categories, segmented by customer segment (Consumer, Corporate, Home Office). The chart uses D3.js with the `d3.nest`, `d3.layout.stack`, and `d3.legend.color` APIs to compute the stacked layout and render an interactive legend. Data is loaded from a CSV file (`data(sorted & grouped).csv`). Hover tooltips and a semi-transparent overlay highlight individual segments.

SSarahKiyani
96% match
Loading thumbnail…

Visualization 1 (Stacked Bars)

This stacked bar chart visualizes sales comparisons across different market segments (Consumer, Corporate, Home Office) for various product sub-categories. The visualization uses an interactive SVG rendering with a color legend that allows users to highlight specific segments. Built with D3.js, the chart employs the `d3.layout.stack` API to create stacked bars, with tooltips via `d3-tip` to display precise sales values. The data is sourced from a categorized CSV file showing sales totals, and the chart animates when rendering layers.

Pprincit
96% match
Loading thumbnail…

Visualization 1 (Stacked Bars)

This interactive stacked bar chart compares sales across market segments and product sub-categories, with each bar segmented by sub-category and colored by segment. The visualization uses D3.js version 3.5.5 with the SVG rendering and animation APIs, featuring hover tooltips via d3-tip and a color legend that filters foreground bars when hovered. Data is loaded from CSV files showing sales figures for Consumer, Corporate, and Home Office segments across seventeen sub-categories, displayed with formatted axis labels and a custom SI tick formatter using the `d3.format` API.

Ssndcaldgafz
95% match