Coffee Data

100%

✓ Published0🌍 Public

Last edited Sep 19, 2020

Created on Sep 14, 2020

This visualization uses an UpSet plot to show the intersection of coffee-drinking times across four periods (Mañana, Mediodía, Tarde, and Noche), with horizontal bars displaying the size of each unique combination and circled matrix dots indicating which periods are included. The SVG rendering is built with D3 v5 within a React framework, using custom functions to compute set intersections and a tooltip on bar hover to reveal the exact count. The data consists of arrays of numeric IDs, sorted in descending order to highlight the most common overlaps.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Untitled

This visualization is an UpSet plot that displays the intersection sizes of four overlapping sets of categorical values. The bar chart shows the count of elements in each set combination, while a matrix of circles beneath indicates which sets are included in each intersection, with connecting lines highlighting the relevant sets. The plot is rendered as an SVG using D3 v5, with the `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` APIs handling scaling and axes. The code computes all intersections recursively and includes tooltips on bars to reveal the set names and exact counts.

Vvpruden1

70% match

Loading thumbnail…

Coffee Scatter Plot

This scatter plot compares aroma and flavor ratings for the first 500 coffee samples from the Coffee Quality Institute dataset, showing a positive correlation between the two taste attributes. The visualization uses D3 v5 scales, axes, and SVG circles, with data loaded via `d3.csv` and parsed with unary plus operators. Axes are rendered using `axisBottom` and `axisLeft`, while circles are appended to a group element with a brown fill and low opacity. The chart’s domain is fixed from 7 to 9 for both scales, and axis labels and a title are added as SVG text elements.

OOxfordComma

66% 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

65% 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

64% match

Loading thumbnail…

Worktime

This stacked bar chart visualizes worktime patterns by day, using a CSV file of start and end timestamps. Each bar represents a day, and segments within the bar show the duration of activities (e.g., “slq,” “edm”) between 7:30 AM and 7:30 PM. The chart uses D3 v4 with SVG, employing d3-dsv to parse data, d3-scale for positioning and color encoding, d3-axis for the time-based y-axis, and d3-shape for stacking. Hovering over a segment highlights it and displays a tooltip.

BBrunoDumas

64% match

Loading thumbnail…

Star Break Coffee

Star Break Coffee displays monthly revenue and profit for a coffee chain using a static bar chart. Data from data.csv is mapped to SVG rectangles via d3.scaleBand, d3.scaleLinear, axisBottom, and axisLeft. The chart features dark blue axis labels, grey bars that turn green on mouseover via d3.select and transition, and uses Bootstrap for layout.

MMerceEscalante

64% match

Loading thumbnail…

Fork of ICE-6-Prathima -coffee

This bar chart visualizes sales volumes for different coffee menu items, displaying each beverage name along the x-axis and its corresponding sales quantity on the y-axis. The visualization uses D3 v7’s `d3.csv` to load data from a GitHub gist, then applies `d3.scaleBand` and `d3.scaleLinear` to map categories and values. Bars are rendered as SVG rectangles with a steelblue fill, and axes include rotated labels using `d3.axisBottom` and `d3.axisLeft`.

Kkotlavamsireddy@gmail.com

64% match

Loading thumbnail…

Untitled

This stacked bar chart displays eye color frequencies across four hair color categories. The visualization uses d3.csv to load the dataset, d3.stack() to compute stacked segments, and d3.scaleBand/d3.scaleLinear for axes. Each bar segment is colored via a d3.scaleOrdinal palette, with a legend added in the second implementation. The SVG rendering relies on d3.axisBottom, d3.axisLeft, and nested data joins to append rectangles per subgroup.

CCo10

64% match