Skip to main content
SimilarExport ZIP
100%

Total Sales by State and Gender

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

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.

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

Total Sales by Season and Gender

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.

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

Grouped States Genders

This example displays the first row of a dataset as a JSON object, showing a state's name, gender category, and total sales. The visualization uses JavaScript to load the CSV data, convert the "Total_Sales" field to a numeric type, and output the first record formatted in a `<pre>` tag. It is built with the `index.js` file, which imports data from `grouped_states_genders.csv`, and the source is the Shopping Habits Dataset from Kaggle. The example demonstrates a minimal, code-based preview of the data structure.

Mmacgregorm01@gmail.com
74% match
Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the population of different states broken down by age groups, with each bar segmented into colored bands representing the age categories. The chart uses an ordinal x-scale for states, a linear y-scale for population counts, and a color ordinal scale for the age series. The visualization is rendered as SVG via D3 v3, loading data from a CSV file and using d3.csv, d3.scale.ordinal, d3.scale.linear, d3.format, d3.max, d3.keys, and d3.svg.axis. A legend identifies the age groups, while the bars are sorted by total population.

CCBasis
72% match
Loading thumbnail…

Normalized Stacked Bar Chart

This normalized stacked bar chart displays the percentage distribution of age groups across U.S. states, sorting states by the proportion of their youngest residents. Using D3 v4, it applies `d3.stack` with `stackOffsetExpand` to scale each bar to full height, then renders SVG rectangles with an ordinal color scale for age categories. Axis labels are formatted as percentages, and a custom legend anchored to each bar’s final segment identifies each series. The chart loads population data from `data.csv` and sorts states in descending order of the "Under 5 Years" share.

Mmbostock
72% match
Loading thumbnail…

Stacked Bar Chart

This stacked bar chart shows population totals for each state, broken down by seven age groups, with each bar sorted by overall population and segments colored by age category. It loads data from a remote CSV file using d3.csv, then builds the visualization with d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal for color encoding. The stacked positions are computed using d3.stack, while d3.axisBottom and d3.axisLeft render the axes. The chart includes a legend and uses an SVG rendering approach with conventional margins.

MMTClass
72% match