Untitled

Untitled

This interactive stacked bar chart displays the sales distribution across cities for a selected customer segment, using data from a CSV file of store transactions. A dropdown menu filters by segment, while a checkbox toggles city sorting by total sales value. Built with D3 v5 and React, the visualization uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to render the bars, with smooth transitions animated via `transition().duration()`. SVG elements and axes update dynamically in response to user selections.

92% match

Untitled

A stacked bar chart displays sales data across cities for a selected customer segment, with bars divided by product sub-category. An interactive dropdown filters by segment, while a checkbox toggles between sorting cities alphabetically or by total sales. Built with React and D3 v5, the visualization uses `d3.csv` to load data, `d3.stack` for stacking layers, and transitions to animate updates. SVG rects and axes render the chart, with text labels showing quantities above each bar.

Ssafdarawan

90% match

Untitled

A stacked bar chart displays the distribution of sales across three product categories—Furniture, Office Supplies, and Technology—for each city in a Superstore dataset. Users select a customer segment from a dropdown menu and can toggle sorting by total sales or city order via a checkbox. Built with React and D3 v5, the visualization uses `d3.csv` to load data, `d3.stack()` to generate layered bars, and `d3.scaleBand` with `d3.scaleLinear` for axes. Smooth transitions animate changes with `transition.duration`, while labels show the total quantity per city.

Untitled

Untitled

A dropdown menu selects a region, and a stacked bar chart animates to show the distribution of Furniture, Office Supplies, and Technology sales across cities. Each bar is segmented by category, with city names on the x-axis and total sales scaled on the y-axis. A checkbox toggles the sorting of bars by city name or by the derived segment total. The chart uses d3.csv to load the Superstore data, d3.stack for layering, d3.scaleBand and d3.scaleLinear for scales, and d3.transition to animate updates. SVG rendering with React centers the visualization.

Untitled

This example shows sales data for supermarket orders, broken down by city, with stacked bars representing categories like Furniture, Office Supplies, and Technology. A dropdown menu filters the display by customer segment, and a checkbox toggles between sorting bars by total sales or by city order. Built with React and D3 v5, it uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to render the SVG chart, with `transition` methods animating updates when filters change. The data comes from a CSV file containing individual order records.

Hhyejinid

Fork of Untitled

This example shows a stacked bar chart of sales quantities by city for a selected customer segment, with a dropdown to switch segments and a checkbox to toggle sorting by total quantity. Built with D3 v5, it uses `d3.stack` to layer the data, `d3.scaleBand` and `d3.scaleLinear` for axes, and ordinal colors. Transitions animate updates via `transition.duration`, while the data comes from a CSV file of sales orders. The visualization is rendered as SVG.

NNarayana Reddy

83% match