Skip to main content
SimilarExport ZIP
100%

Sales comparision by segment per sub category

✓ Published0🌍 Public
Oosaka004
Last edited Apr 30, 2020
Created on Apr 30, 2020

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.

AI-generated description

Stacked bar chart showing estimated religion breakdown.

Interactions:

  • Hover over the bars for tool tips.
  • Hover over the legend to highlight religions.

Based on an example from the tutorial Splitting Charts. Derived from the following examples published on bl.ocks.org:

Estimated 2010 religion breakdown of the most populous 20 countries.

Data is from The Global Religious Landscape by Pew Research, generated using this processing script.

TODO: Upgrade dependencies to latest D3 & friends.

MIT Licensed

Similar vizzes

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

Sales comparision by segment per sub-category

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.

Pprincit
90% 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
89% 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
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
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
86% match
Loading thumbnail…

Stacked Bars

This chart uses stacked bars to show how total sales are divided among customer segments for each product sub-category. The visualization allows users to hover over legend entries, which highlights the corresponding segment’s bars while dimming the rest. The implementation uses d3.svg.axis, d3.nest, and d3.layout.stack to aggregate and stack the data from the CSV file, with bar rendering using SVG rectangles. A d3-tip tooltip displays detailed values on hover. The color legend, built with d3.legend.color, drives the interactive filtering.

Pprincit
86% match
Loading thumbnail…

Stack Chart Template

This stacked bar chart compares sales by customer segment (consumer, corporate, home office) across product sub-categories. Rendered as an SVG with animated transitions, users can toggle between absolute sales values and percentage shares. The visualization uses D3.js version 3.5.6, leveraging d3.layout.stack for stacking, d3.scale.ordinal for the x-axis, and d3.svg.axis for rendering. Data is loaded from a local CSV file, and hover effects highlight individual bar segments.

Xxushengwang
86% match