Sales comparision by segment per sub-category

100%

Sales comparision by segment per sub-category

✓ Published0🌍 Public

Last edited Apr 28, 2020

Created on Apr 28, 2020

This example visualizes the total sales case numbers for four segments—Consumer, Corporate, Home Office, and Unknown—stacked by sub-category, with each segment’s contribution represented as a colored bar section. The chart initially displays absolute counts, and a toggle above the visualization switches the view to a percentage-based, normalized comparison. The visualization is built with D3.js v3 and Vue, using the `d3.svg.axis`, `d3.scale.linear`, and `d3.layout.stack` APIs to compute and render the stacked bars. The data is loaded from a CSV file containing the sales records.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Sales comparision by segment per sub category

This stacked bar chart compares sales by customer segment within each product sub-category. Hovering over a segment highlights that specific layer across all sub-categories while dimming the others, and tooltips reveal the exact sales value per segment and sub-category. The visualization uses D3.js version 3.5 with `d3.layout.stack` for stacking, `d3.svg.axis` for scales, and `d3-tip` for tooltips, with SVG rendering and CSS transitions for the hover effects. Sales data comes from the provided CSV file.

Oosaka004

90% match

Loading thumbnail…

Sales Comparision by Segment per sub-category

This visualization compares sales by customer segment across sub-categories using stacked horizontal bars, with segments distinguished by color. The bars are rendered as SVG rectangles, and hovering over a segment highlights it while dimming others. The code uses D3.js v3, including `d3.nest` and `d3.layout.stack` for aggregation and stacking, `d3.svg.axis` for scales, and `d3-tip` for tooltips. Data comes from a CSV file with sales records.

SSarahKiyani

89% match

Loading thumbnail…

sales comparision by segment

A horizontal bar chart compares sales across product sub-categories for three customer segments. The visualization uses D3.js v5 to load data from a CSV file and render SVG rectangles, with each segment represented as a separate category. Sales values scale linearly on the x-axis, while sub-categories are positioned on a band scale for the y-axis. The chart includes axes generated with `d3.axisLeft` and `d3.axisBottom`, and the code filters and aggregates the data by segment and sub-category.

Oosaka004

86% match

Loading thumbnail…

sales comparision by segment

A bar chart displays sales figures for each product subcategory, with bars colored steelblue. The visualization uses the D3.js library to load data from a CSV file and scale the x-axis linearly while the y-axis uses a band scale for categorical subcategories. The chart includes axes generated with D3's axis functions, and the SVG rendering shows the total sales distribution across the different product types.

Oosaka004

84% match

Loading thumbnail…

sales comparision by segment

Oosaka004

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

83% match

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

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

82% match