Skip to main content
SimilarExport ZIP
100%

Total Sales by State and Season

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

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`.

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…

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
88% 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
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…

Grouped States Seasons

This example visualizes the Grouped States Seasons dataset, showing the total sales for each U.S. state across Fall, Spring, Summer, and Winter. The visualization displays the structured data values for a single state entry in a raw JSON format. It imports the data from a CSV file, converts the Total_Sales values to numbers, and renders the first data object as formatted text in a pre element using vanilla JavaScript. The data originates from the Shopping Habits Dataset on Kaggle.

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

State Data Scatterplot with Color Legend

This visualization displays a scatterplot of state ratings, with each circle representing a state's average customer rating against its total number of purchases. The circles are colored by the most popular season for that state, using an ordinal color scale with distinct hues for Summer, Fall, Winter, and Spring. A D3 color legend with interactive hover highlighting allows users to filter which season's data points remain fully opaque. The visualization uses d3.scaleLinear for the axes, d3.scaleOrdinal for colors, and d3-axis for tick marks, while d3.select handles mouse events for tooltips and legend interactions.

Mmacgregorm01@gmail.com
75% match
Loading thumbnail…

State Shopping Data Scatterplot

This scatterplot visualizes state-level shopping data, plotting the total number of purchases against average customer rating. Each circle represents a state, with its size scaled to the square root of average purchases per customer and its color indicating the popular season (gold for summer, orange for fall, blue for winter, green otherwise). The visualization uses d3.scaleLinear for axes and d3.axisLeft for the y-axis, while custom tooltips appear on mouseover. Data comes from the @mjmacgregor/state-ratings package, and rendering leverages D3’s selection and join methods.

Mmacgregorm01@gmail.com
74% 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
73% match