Skip to main content
SimilarExport ZIP
100%

sales comparision by segment

✓ Published0🌍 Public
Oosaka004
Last edited May 4, 2020
Created on May 4, 2020

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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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

Sales by Category

This bar chart compares total sales across product categories. The visualization uses aggregated sales data from a CSV file, displaying each category as a steel-blue bar. The chart is built with D3 version 5, using `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. The SVG rendering includes axis labels and a title, with the x-axis labels rotated for readability.

Ssaikrishnabussa
80% match