Skip to main content
SimilarExport ZIP
100%

Aggregated, Interactive Common Cocktail Ingredient Pairings

✓ Published4🌍 Public
Ssophburke
Last edited Oct 26, 2019
Created on Oct 26, 2019

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.

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…

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

Interactive Common Cocktail Ingredient Pairings

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.

JJacklyn Turner
92% 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
92% 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…

Cocktail Ingredient Pairings

A bartender can filter a dataset of over 400 cocktails by a main alcohol to see a ranked horizontal bar chart of the 20 most common co-ingredients. The chart counts how often each ingredient appears with the selected spirit, with a tooltip showing the exact count. The interactive React app uses D3’s `scaleBand` and `scaleLinear` for layout, with filtering, grouping, and ranking done via array methods and `d3.nest`. Data comes from a remote CSV file parsed with `d3.csv`.

KKeerthiKandadai
90% match