State and Season with Tooltip

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

88% match

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.

78% match

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.

78% match

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.

76% match

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.

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.

Untitled

This interactive stacked bar chart displays the distribution of three categories across U.S. states for a selected year, with a dropdown menu to switch between years. The visualization uses D3.js v5’s `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.stack()` to compute stacked segments. Animated transitions (via `transition().duration()`) smoothly update bar heights and axis labels. Total values for each state are shown above the bars. The SVG rendering includes axis groups and colored layers, with the year selector populated from the dataset.

Pp189

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.