Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Ssafdarawan
Last edited May 31, 2020
Created on May 31, 2020
Forked from 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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

SSarahKiyani
96% match
Loading thumbnail…

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.

SSarahKiyani
92% match
Loading thumbnail…

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.

SSarahKiyani
92% match
Loading thumbnail…

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

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.

SSarahKiyani
90% match
Loading thumbnail…

Untitled

This visualization is an interactive, stacked bar chart that compares total sales by Segment across Sub-Categories of products, filtered by Region via a dropdown menu. It also includes a checkbox to toggle the sort order of the bars. The chart is implemented in React, using the D3 v5 library, and renders as an SVG with animated transitions (`.transition()`) when the filter or sort changes. The data is loaded from a CSV file containing order details, and the chart uses D3's `scaleBand`, `scaleLinear`, and `scaleOrdinal` for axes and color encoding, along with `enter`, `exit`, and `merge` operations to update the bars and labels.

SSarahKiyani
90% match
Loading thumbnail…

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

Untitled

A bar chart displays sales figures for individual salespeople, with each bar’s height proportional to the numeric value in the `sales.csv` dataset. The visualization uses D3 v4’s `scaleBand` for the categorical x-axis, `scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Bars are rendered as SVG rectangles, colored steelblue via a CSS class, within a React-compatible HTML page.

LL1EO
83% match