Skip to main content
SimilarExport ZIP
100%

Cocktail Ingredient Pairings

✓ Published0🌍 Public
WW9183907
Last edited Oct 27, 2020
Created on Oct 27, 2020

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.

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.

There is a dropdown menu that allows the user to choose the main types of alcohol to act as the filter. The chart will then return the ingredients in the cocktails containing the displayed ingredients.

MIT Licensed

Similar vizzes

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
94% 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
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
91% 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
91% match
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
90% 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
90% match
Loading thumbnail…

Filterable Cocktail Ingredient Bar Chart

This interactive bar chart displays the top 20 cocktail ingredients, ranked by the number of cocktails containing each ingredient. A dropdown menu filters the dataset by main alcohol type, updating the bar lengths to show ingredient frequencies within cocktails that include the selected spirit. Built with React and D3 v5, the visualization uses `d3.nest()` for aggregation, `scaleBand` and `scaleLinear` for positioning, and SVG rectangles for rendering. Data comes from Hotaling & Co.’s parsed cocktail ingredient dataset.

JJacklyn Turner
90% 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
90% match