Skip to main content
SimilarExport ZIP
100%

Interactive Cocktail Alcohol Pie Charts on U.S. Map

✓ Published1🌍 Public
JJacklyn Turner
Last edited Oct 31, 2019
Created on Oct 26, 2019

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.

AI-generated description

Displays pie charts containing the top 10 alcohols found in cocktails across locations on a U.S. map. Based on the Hotaling & Co cocktails data set. Hovering over the values in the legend will highlight the alcohol and counts within each pie chart. 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…

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

Pies for Top Cocktail Ingredients with Interactive Legend

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.

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
85% 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
85% 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
84% 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
80% match
Loading thumbnail…

ICE-7-Pie Chart

This example visualizes alcohol consumption by country as a pie chart, showing the top ten countries by liters of alcohol consumed. Built with React and D3 v5, it uses `select`, `csv`, `pie`, and `arc` to generate SVG paths, with `scaleOrdinal` and `schemeCategory10` for colors. A legend, created with `legend.append("rect")` and `text`, displays each country’s name, a color swatch, and its consumption value from the provided CSV data source.

AAli Shah Solanki
80% 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
79% match