Skip to main content
SimilarExport ZIP
100%

Pies for Top Cocktail Ingredients with Interactive Legend

✓ Published0🌍 Public
JJacklyn Turner
Last edited Oct 31, 2019
Created on Oct 25, 2019

This interactive map displays the top 10 cocktail ingredients across major U.S. cities, using colored pie charts positioned at each city’s coordinates to show ingredient proportions. Hovering over the legend highlights matching ingredients on the map while dimming others. Built with React and D3 v5, the visualization uses d3.pie for chart generation, d3.geoAlbers and d3.geoPath for the map projection, and d3.scaleOrdinal for color encoding. Data comes from the Hotaling & Co cocktails dataset, with U.S. state shapes from the us-atlas TopoJSON.

AI-generated description

A map showing the top 10 ingredients used in cocktails across the US from the Hotaling & Co cocktails data set. Hovering over ingredients in the legend highlights them on the map.

US map shapes are provided by US-Atlas CDN by jsDelivr.

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

JJacklyn Turner
92% match
Loading thumbnail…

Top Cocktail Ingredients with Interactive Legend

A map of the United States plots the top ten cocktail ingredients by city, with circle size proportional to ingredient count and color indicating the specific ingredient. An interactive legend filters the map on hover, dimming non-selected ingredients and their corresponding data points. The visualization uses React and D3, employing `d3.scaleSqrt` for sizing, `d3.scaleOrdinal` for color assignment, and `d3.geoPath` to render the map from US-Atlas topology data. City coordinates and ingredient data come from the Hotaling & Co cocktails dataset.

JJacklyn Turner
92% match
Loading thumbnail…

Top Cocktail Ingredients with Interactive Legend

A map of the United States plots the top ten cocktail ingredients by city, with circle size proportional to ingredient count and color indicating the specific ingredient. An interactive legend filters the map on hover, dimming non-selected ingredients and their corresponding data points. The visualization uses React and D3, employing `d3.scaleSqrt` for sizing, `d3.scaleOrdinal` for color assignment, and `d3.geoPath` to render the map from US-Atlas topology data. City coordinates and ingredient data come from the Hotaling & Co cocktails dataset.

JJacklyn Turner
92% match
Loading thumbnail…

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
89% match
Loading thumbnail…

Interactive Bubble Chart for Top Cocktail Ingredients

A choropleth-style bubble map displays the top ten cocktail ingredients across U.S. cities, with circle size encoding ingredient count and color distinguishing each ingredient. Hovering over the color legend highlights the corresponding cities on the map while dimming others. The visualization uses React with D3 v5, employing `scaleSqrt` for bubble sizing, `scaleOrdinal` for color mapping, and `geoAlbers` with `geoPath` from d3-geo to render U.S. state boundaries from TopoJSON. Data comes from the Hotaling & Co cocktails dataset, with U.S. map shapes sourced from the us-atlas package.

JJacklyn Turner
88% match
Loading thumbnail…

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.

JJacklyn Turner
84% match
Loading thumbnail…

Pie Chart

A donut chart displays the ten most common cocktail ingredients from a Hotaling & Co. dataset, ranked by frequency of use across recipes. The React app loads CSV data via `d3.csv`, aggregates counts with `d3.nest()`, and sorts results in descending order before slicing to the top ten. D3’s `pie()` generator computes arc angles, while the `arc()` generator renders SVG paths with an inner radius for the donut effect. Hovering reveals ingredient names and counts through native SVG `<title>` tooltips.

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