Top Cocktail Alcohols

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.

78% match

Interactive Cocktail Alcohol Pie Charts on U.S. Map

This interactive visualization displays pie charts on a U.S. map showing the top 10 alcohols found in cocktails across eight major cities. The chart uses React with D3.js v5, employing `d3.geoAlbers` and `d3.geoPath` for map rendering and `d3.pie` and `d3.arc` for the pie charts. Hovering over the legend highlights matching ingredients across all pies, while tooltips reveal alcohol names and counts. Data comes from the Hotaling & Co cocktails dataset, with map shapes from the US-Atlas TopoJSON.

78% match

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

77% match

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.

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

Fork of Interactive Cocktail Alcohol Pie Charts on U.S. Map AVM try out

This visualization displays pie charts on a U.S. map showing the top 10 alcohols used in cocktails across eight major cities. Hovering over legend items highlights matching alcohol counts within each pie and fades non-matching segments. Built with React and D3 v5, it uses `d3.geoAlbers` and `d3.geoPath` for map rendering, `d3.pie` and `d3.arc` for chart generation, and data from the Hotaling & Co cocktails dataset.

SSurjectif

Top Cocktail Ingredients by Location

This map displays the locations of cocktails containing top ingredients from the Hotaling & Co cocktails dataset, with each point representing a city. The visualization uses d3.geoPath and d3.geoAlbers to render US state shapes from the US-Atlas TopoJSON, overlaid with graticules and state interiors. React manages the component lifecycle, while d3.csv loads the ingredient location data and d3.json fetches the map topology. Circles are positioned via the Albers projection and styled with a blue fill, providing a geographic overview of where these cocktails are found.

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