Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Hhyejinid
Last edited Jun 4, 2020
Created on Jun 4, 2020
Forked from 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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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

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

Untitled

This interactive scatter plot displays sales versus profit for individual customers, with data points colored by region and filtered by a year selector. Built with React and D3.js v4, it renders as an SVG animation, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeSet2` for regional colors, and `d3.csv` to load the Superstore dataset. A dropdown menu populated via `d3.select` and `append('option')` lets viewers switch between years, updating the plotted circles while tooltips show customer details on mouseover.

SSai SriHarsha Griddaluru
84% match