Skip to main content
SimilarExport ZIP
100%

D3 Example

✓ Published0🌍 Public
Pprincit
Last edited Apr 29, 2020
Created on Apr 29, 2020
Forked from React Starter

A stacked bar chart shows Sales across Product Sub-Categories, with bars segmented by Customer Segment, using a categorical color scale. The visualization renders as SVG via D3 v3’s `d3.layout.stack`, `d3.scale.ordinal`, and `d3.svg.axis`, with a legend from d3-legend. Data is loaded from a CSV file containing order details, while axes use a custom SI tick formatter that converts billions to "B".

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Example

A stacked horizontal bar chart displays sales totals per product sub-category, with bars segmented by customer segment and colored using `d3.scale.category10`. Hovering over a legend entry highlights that segment by fading other bars behind a semi-transparent overlay and re-drawing the selected segment in the foreground, while `d3-tip` shows tooltips. The chart uses D3 v3 with SVG, including `d3.layout.stack` for stacking and `d3.legend.color` for an interactive color legend, and reads data such as the provided `lebron.csv` file.

Pprincit
91% match
Loading thumbnail…

Stacked Bars

Stacked bar chart displays sales totals per product sub-category, segmented by customer segment. The visualization uses D3.js with SVG and animated transitions. Data comes from a CSV file containing order records. Hovering over the color legend highlights a specific segment by dimming other layers with a semi-transparent overlay. Tooltips, powered by d3-tip, show exact values for each bar segment. Axis formatting and legend rendering use D3's SVG axis and d3-legend APIs.

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

Stacked Bars

This stacked bar chart displays sales totals by product sub-category, with each bar segmented by customer segment. The visualization uses Vega-Lite API with D3.js to load CSV data, aggregate sales values, and render SVG output. Categories are sorted by descending sales, while color encoding differentiates Consumer, Corporate, and Home Office segments. Tooltips provide additional sales details on interaction, and axis labels are customized through the Vega-Lite config object.

Pprincit
87% match
Loading thumbnail…

D3 Example

This visualization displays sales data across product sub-categories, segmented by customer type (office, home, consumer) as three colored lines. The chart uses D3.js v3 with an SVG rendering approach, employing `d3.svg.line`, `d3.scale.linear`, and `d3.nest` to group data from the CSV file. Axes are formatted with a custom SI tick formatter, and a categorical color legend is generated using the d3-legend plugin. The interactive rendering responds to the loaded dataset, drawing one path per segment.

KKainatIqbal
85% match
Loading thumbnail…

Example

This multi-series bar chart displays product category sales across three customer segments, with each bar stacked to show the cumulative sales total per category. The visualization uses D3.js with SVG rendering and a custom legend that filters the displayed segments on hover, dimming the base bars and highlighting the selected layer. Data is loaded from a CSV file, and the chart employs d3.scale.ordinal, d3.layout.stack, and d3.legend to handle axes, stacking, and color encoding. Animated transitions are not present, but the interactive tooltip via d3-tip provides per-bar sales values.

SShashwat Priyadarshi
85% 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
84% match
Loading thumbnail…

Visualization 1 (Stacked Bars)

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.

Ssafdarawan
84% match