Fork of Stacked Franchise Revenues by Revenue Category

100%

Fork of Stacked Franchise Revenues by Revenue Category

✓ Published0🌍 Public

Last edited Feb 10, 2021

Created on Feb 10, 2021

Forked from Stacked Franchise Revenues by Revenue Category

This interactive stacked bar chart displays franchise revenues broken down by revenue category, using data from R for Data Science’s Tidy Tuesday. Built with D3.js, it includes an animated color legend that highlights specific layers on hover, while dimming others. A tooltip via d3-tip shows dollar amounts in billions. The chart uses d3.layout.stack, d3.svg.axis, and d3.legend.color, with SVG rendering and custom tick formatting for readability.

AI-generated description

This visualization was originally forked from one of Curran Kelleher's stacked bar chart examples and modified to include Franchise Revenue data which originates from R for Data Science's Tidy Tuesday weekly event for July 2, 2019.

This visualization serves as a companion chart to the previous scatter plot, contrasting its view with a stacked bar chart and a legend with interactive highlighting. The next goal is to combine the two visualizations, their styles, and their techniques into one cohesive view.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stacked Franchise Revenues by Revenue Category

This stacked bar chart visualizes franchise revenue by category across different franchises, using data from TidyTuesday. The visualization, built with d3.js, shows revenue categories as stacked segments within each bar. Interactive highlighting is implemented by hovering over the legend, which fades out other categories while keeping the hovered one prominent. The chart uses d3.legend for the interactive color legend, d3.tip for tooltips on hover, and custom axis formatting that converts the revenue scale to billions.

Yyuting89830@gmail.com

97% match

Loading thumbnail…

Stacked Franchise Revenues by Revenue Category

This stacked bar chart shows franchise revenues broken down by revenue category, with each bar representing a franchise and stacked segments colored by category. Hovering over the legend highlights the corresponding category and dims others, while a tooltip displays exact revenue values in billions. Built with D3.js version 3, it uses `d3.layout.stack` for stacking, `d3.legend.color` for the interactive legend, and `d3-tip` for tooltips. The data comes from Tidy Tuesday’s July 2019 franchise revenue dataset, rendered as an SVG with animated transitions.

Ssophburke

94% match

Loading thumbnail…

Stacked Franchise Revenues by Revenue Category

This stacked bar chart shows franchise revenues broken down by revenue category, with each bar segment representing a category and the full bar height showing total revenue. An interactive legend allows users to highlight specific categories, dimming others and displaying tooltips with precise billion-dollar figures. Built with D3.js version 3, it uses d3.layout.stack for stacking, d3.legend for the color legend, and d3-tip for hover details. The data comes from Tidy Tuesday’s July 2, 2019 franchise revenue dataset, rendered as an SVG with animation support.

Vvwm

94% match

Loading thumbnail…

Stacked Franchise Revenues by Revenue Category

This stacked bar chart displays franchise revenues by revenue category, with bars segmented by category and a color legend that highlights individual layers on hover. The visualization, rendered as SVG, uses D3.js to scale the x-axis in billions and the y-axis by franchise name, with tooltips providing exact revenue figures. It incorporates the d3.legend and d3.tip APIs for interactive legend highlighting and informative tooltips, while the data comes from Tidy Tuesday’s 2019 franchise revenue dataset. The chart is built upon a forked stacked bar example, layering semi-transparent overlays to emphasize selected categories during mouse interaction.

Yyuzhang21

93% match

Loading thumbnail…

Stacked Algorithm Results Evaluation

This stacked bar chart evaluates franchise revenue performance, breaking down each franchise's total earnings into color-coded revenue categories. Interactive highlighting via the color legend filters and emphasizes specific segments, while a semi-transparent overlay dims non-selected bars. The visualization uses D3.js with d3.layout.stack for layering, d3-legend for the interactive legend, and d3-tip for hover tooltips showing revenue values in billions. Data comes from Tidy Tuesday's 2019 franchise revenue dataset, rendered as an SVG animation.

Yyuzhang21

88% match

Loading thumbnail…

Franchise Revenues - Revenue by Franchise

This chart displays franchise revenue by franchise name using horizontal bars, with color encoding for revenue category and a tooltip showing the original media type. It filters data to include only franchises with revenue above 10 units, highlighting how merchandise dominates the field. The visualization is built with the Vega-Lite API, using d3.csv for data loading and rendering via vega-tooltip for interactive hints. Revenue data comes from the Tidy Tuesday franchiseRevenues dataset.

Vvwm

81% match

Loading thumbnail…

Franchise Revenues (Category and Total) with Selectable Color Axis

This interactive scatterplot displays franchise revenues across categories and totals, with selectable axes for X, Y, and color encoding. Users can switch between revenue, total revenue, revenue category, original media, and year created using React dropdowns. The visualization uses D3 v5 scales to map data from the Tidy Tuesday Franchise Revenue dataset to SVG circles, with a legend showing eight generalized media types. Marks include opacity to reveal overlapping categories when viewing total revenue across the color axis, with hover tooltips showing franchise names.

Vvwm

79% match

Loading thumbnail…

Franchise Revenue Totals with Dropdown Menus and Color Legend

This interactive visualization displays franchise revenue data as a scatterplot, plotting total revenue against year created, with each point colored by original media type. Two dropdown menus let users switch the X and Y axes between total revenue and year created, while a color legend identifies the media categories. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and SVG circles for marks, with tooltips showing franchise names. Data comes from a CSV file loaded via d3.csv, sourced from R for Data Science's Tidy Tuesday event.

Vvwm

77% match