Skip to main content
SimilarExport ZIP
100%

Total Sales by Season and Gender

✓ Published0🌍 Public
Mmacgregorm01@gmail.com
Last edited Nov 13, 2024
Created on Nov 13, 2024

A stacked bar chart displays total sales for each season, divided by gender, with two distinct color segments per bar. The visualization includes a legend that highlights the corresponding gender segments when hovered, dimming all other portions of the chart. Built with D3.js, it uses `scaleOrdinal` for colors, `flatRollup` for data aggregation, and `stack` to structure the stacked bars, with interactive hover handling in the legend component.

AI-generated description

Stacked bars showing estimated religion breakdown of the most populous 20 countries in 2010. Based on an example from the tutorial Splitting Charts. Interactions:

  • Hover over the legend to highlight religions.

Data is from The Global Religious Landscape by Pew Research, generated using this processing script.

MIT Licensed

Similar vizzes

Loading thumbnail…

Total Sales by State and Season

This stacked bar chart shows total sales by state, with each bar segmented by season (Winter, Spring, Summer, Fall). Hovering over the legend highlights the corresponding season across all bars and dims others, while the highlighted stack is raised to the front. Built with D3, it uses `scaleOrdinal` for colors, `stack()` for grouping, and `flatRollup` to structure data from the `@mjmacgregor/grouped_states_seasons` package. The chart is responsive via `observeResize`.

Mmacgregorm01@gmail.com
87% match
Loading thumbnail…

Total Sales by State and Gender

This example displays a stacked bar chart illustrating total sales by state, segmented by gender, using data from the `@mjmacgregor/grouped_states_genders` package. The chart uses D3's `scaleOrdinal` for colors, `stack` and `flatRollup` for data aggregation, and `scaleLinear` and `scaleBand` for axes. Hovering over the legend highlights the corresponding gender segment in the bars, while non-hovered segments fade. A color legend with interactive hover states is implemented using the custom `colorLegend` function.

Mmacgregorm01@gmail.com
84% match
Loading thumbnail…

Total Sales Interactive Stacked Bar Charts

Three interactive stacked bar charts display total sales from the Shopping Habits Dataset, broken down by states and seasons, states and genders, and seasons and genders. Built with Vega-Lite and embedded via VizHub, each chart uses interactive tooltips and legends to explore aggregated sales totals. The bars are stacked to show component contributions, with color encoding mapping categorical dimensions. The visualizations are rendered declaratively, leveraging Vega-Lite’s JSON specification to compute and display the aggregated data without custom JavaScript.

Mmacgregorm01@gmail.com
80% match
Loading thumbnail…

Grouped Seasons Genders

This example visualizes the total sales for each season, broken down by gender, using a simple dataset derived from the Shopping Habits Dataset. The rendering displays the raw data from the CSV file as formatted JSON text within an HTML container. The code loads the data with an import statement, converts the `Total_Sales` values to numbers, and uses a container’s `innerHTML` property to present the first data record with a specific font size.

Mmacgregorm01@gmail.com
78% match
Loading thumbnail…

State and Season with Tooltip

This stacked bar chart displays total sales by US state, segmented across four seasons. Hovering over a bar segment reveals a tooltip, while hovering over the color legend highlights that season's data across all states and fades the others. The visualization uses D3.js with `scaleOrdinal` and `scaleLinear` for axes and colors. The source data comes from the Pew Research Global Religious Landscape, processed via a custom script.

Mmacgregorm01@gmail.com
78% 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
77% match
Loading thumbnail…

Visualization 1 (Stacked Bars)

A stacked bar chart compares total sales across product sub-categories, segmented by customer segment (Consumer, Corporate, Home Office). The chart uses D3.js with the `d3.nest`, `d3.layout.stack`, and `d3.legend.color` APIs to compute the stacked layout and render an interactive legend. Data is loaded from a CSV file (`data(sorted & grouped).csv`). Hover tooltips and a semi-transparent overlay highlight individual segments.

SSarahKiyani
76% 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
75% match