Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
SSurjectif
Last edited Jan 25, 2023
Created on Jan 25, 2023

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.

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…

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
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
89% 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
82% 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
82% 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
81% 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
81% 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 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
79% match