Skip to main content
SimilarExport ZIP
100%

Franchise Revenue Totals with Dropdown Menus and Color Legend

✓ Published1🌍 Public
Vvwm
Last edited Oct 17, 2019
Created on Oct 9, 2019

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.

AI-generated description

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

The goal was to recreate a visualization using React and D3 while incorporating dropdown menus and a color legend. Later iterations will add more values to the dropdowns, allow for simplification of original media, and enable dynamic selection of the color legend's category. Likewise, the legend's colors are not final; I'd like to consolidate these and apply a more friendly set of colors in the next version.

MIT Licensed

Similar vizzes

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

Franchise Revenues - Revenue Stream by Year Created

This scatterplot displays franchise revenue by year created, with each circle colored according to the franchise’s original media type and tooltips revealing franchise names. The visualization highlights outliers such as Hello Kitty, Disney Princess, and Pokémon merchandise earning high revenue despite their relatively recent origins. Built with vega-lite-api, the chart loads CSV data via d3.csv and renders marks using vl.markCircle with encoded x, y, color, and tooltip channels. The code applies custom axis and label styling from config.js to improve readability.

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

Franchise Revenues - Total Revenue by Year Created

This scatterplot displays the total revenue of media franchises against their year of creation, with each circle colored by original media type and revealing trends such as higher earnings among newer franchises and notable outliers like Pokémon. The visualization encodes year as a temporal axis and revenue as a quantitative axis, using tooltips to identify franchises. It is built with the Vega-Lite API (via vega-lite-api) and D3 v5, loading CSV data from a GitHub gist and rendering through Vega and Vega-Lite with a tooltip handler.

Vvwm
80% 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
80% 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
79% 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
79% 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
78% match