Skip to main content
SimilarExport ZIP
100%

Cocktail Ingredient Pairings

✓ Published0🌍 Public
KKeerthiKandadai
Last edited Mar 27, 2020
Created on Mar 27, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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
96% 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
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
92% 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
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
91% 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
91% 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
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