Interactive Common Cocktail Ingredient Pairings

100%

Interactive Common Cocktail Ingredient Pairings

✓ Published1🌍 Public

Last edited Oct 23, 2019

Created on Oct 21, 2019

A horizontal bar chart shows the 50 most common cocktails for any selected ingredient, ranking other ingredients by how frequently they co-occur. The visualization uses a dropdown menu to filter the Hotaling & Co. cocktail dataset, with bars encoded as SVG rectangles scaled by D3's `scaleLinear` and `scaleBand`. Interactivity relies on React state and the `useData` hook, while axes are rendered with the `AxisBottom` and `AxisLeft` components.

AI-generated description

This visualization is based on the dataset of cocktails collected by alcohol importer and distiller Hotaling & Co. The original dataset was modified to parse out and clean up the ingredients into rows.

The chart can be interactive using the ingredient drop down. The user can enter an ingredient to filter on. The chart will return all of the ingredients included in cocktails containing the selected ingredients.

MIT Licensed

Similar vizzes

Loading thumbnail…

Aggregated, Interactive Common Cocktail Ingredient Pairings

This visualization displays the top 20 most frequently used ingredients in cocktails, aggregated from a modified Hotaling & Co. dataset. A bar chart shows ingredient counts, while a dropdown menu filters results by base alcohol such as Gin or Rum. The React app uses d3.csv to load data, d3.nest and d3.rollup for aggregation, and d3.scaleBand and d3.scaleLinear for axes. User selections trigger filtering and re-rendering of the SVG marks.

Ssophburke

92% match

Loading thumbnail…

Fork of Aggregated, Interactive Common Cocktail Ingredient Pairings

This visualization presents a horizontal bar chart of the 20 most common cocktail ingredients, with bars scaled to the number of cocktails containing each ingredient. A dropdown menu filters the data by the main alcohol type. The chart uses React for state management and rendering, with D3 version 5 for data processing, including `nest()` and `rollup()` from `d3` to aggregate, and `scaleBand` and `scaleLinear` for axes. Data originates from a CSV of the Hotaling & Co. cocktail dataset.

SSamir Nandardhane

92% match

Loading thumbnail…

Cocktail Ingredient Pairings

This interactive bar chart ranks the 20 most common cocktail ingredients by frequency, with a dropdown menu allowing users to filter the results by a specific base spirit such as Gin, Rum, or Tequila. The visualization loads data from a CSV file and uses D3 v5’s `scaleBand`, `scaleLinear`, and `nest` to aggregate and sort ingredient counts, while React 16 manages the component state and dropdown interactions. The chart is rendered as SVG with separate `AxisBottom` and `AxisLeft` React components for the axes.

KKeerthiKandadai

91% match

Loading thumbnail…

Fork of Aggregated, Interactive Common Cocktail Ingredient Pairings

This interactive bar chart shows the 20 most common ingredients found in cocktails that contain a selected main alcohol, with bars representing the number of cocktails each ingredient appears in. Users choose the main alcohol from a dropdown menu, which filters the underlying dataset of cocktails collected by Hotaling & Co. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning, `nest()` and `rollup()` for aggregation, and SVG `rect` elements with native `title` tooltips for each bar.

SSamir Nandardhane

91% match

Loading thumbnail…

Cocktail Ingredient Pairings

A horizontal bar chart shows the 20 most common ingredients in cocktails filtered by a selected main alcohol. A dropdown menu lets users choose among spirits like Gin, Rum, or Tequila, with the chart updating to display ingredient frequency counts. The React app uses d3.csv for data loading, d3.scaleBand and d3.scaleLinear for positioning, and d3.nest for aggregation. Data comes from Hotaling & Co.’s cocktail dataset, rendered as SVG rectangles with tooltips.

Jjhcliu19

90% match

Loading thumbnail…

Cocktail Ingredient Pairings

This interactive bar chart shows the 20 most common cocktail ingredients, filtered by a selected base spirit. A dropdown menu lets viewers choose among spirits like Gin, Rum, and Whiskey, and the chart updates to display ingredient counts for cocktails containing that spirit. The visualization uses React for UI components and D3 v5 for scales, the nest() function to aggregate ingredient frequencies, and SVG rects rendered via the Marks component. Data comes from a Hotaling & Co. cocktail dataset, with bars scaled linearly by ingredient count.

KKeerthiKandadai

90% match

Loading thumbnail…

Cocktail Ingredient Pairings

A dropdown menu filters the cocktail dataset by main alcohol type, and a bar chart displays the top 20 most common ingredients among matching cocktails, ranked by frequency. The chart uses D3 v5 scales (scaleBand, scaleLinear) and React components to render SVG bars and axes. The data originates from Hotaling & Co.'s cocktail collection on Kaggle, parsed to extract ingredient counts.

WW9183907

90% match

Loading thumbnail…

Common Cocktail Ingredient Pairings

A horizontal bar chart ranks the most frequent cocktail ingredients, with bar length scaled to ingredient counts and color encoding the primary alcohol type. The visualization is built with the Vega-Lite API, registered with Vega and Vega-Lite libraries, and processes a parsed CSV dataset of cocktails from Hotaling & Co. The chart supports filtering by up to five ingredients, dynamically rebuilding the title and bar ordering based on selected pairings, while tooltips display cocktail names. Users can adjust constants for ingredient filters and result count in the source code.

JJacklyn Turner

89% match