Cocktails (Hotaling & Co.)

100%

Cocktails (Hotaling & Co.)

✓ Published1🌍 Public

Last edited Sep 25, 2019

Created on Sep 5, 2019

Forked from Loading and Parsing CSV Data

This example displays basic statistics about the Hotaling & Co. cocktail dataset, showing its size in kilobytes, row count, and column count as large text. The page loads a CSV file from a GitHub gist using the `d3.csv` method and formats the data with `d3.csvFormat` to calculate the file size. The visualization serves as a minimal data-loading demonstration, highlighting the dataset’s structure without graphical charts. It also includes commented-out alternatives using `fetch` with async/await and a nested promise approach.

AI-generated description

The hotaling_cocktails - Cocktails.csv dataset contains cocktails collected by alcohol importer and distiller Hotaling & Co. The data is sourced from Kaggle.

The dataset can be used as a means to compare cocktail ingredients.

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading Alcohol Consumption CSV Data

This example demonstrates the basics of loading and parsing a CSV dataset with D3.js. It fetches global alcohol consumption data from the World Health Organization and displays a summary of the file’s size, row count, and column count in large text. The visualization uses `d3.csv` to asynchronously load the remote dataset from a GitHub Gist, then `d3.csvFormat` and `data.length`/`data.columns` to compute the displayed metrics. The page renders the result inside a `<pre>` element with no charting or graphical elements.

PPeter VanNostrand

72% match

Loading thumbnail…

Drinks Data Table Summary

This example displays a textual summary of a dataset on alcohol consumption by country, sourced from FiveThirtyEight. It shows the total number of rows and columns, the data size in kilobytes, and the first ten rows as formatted JSON. The visualization uses `d3.csv` to load the data and `csvFormat` to calculate its byte size, then appends the results to the page as `<pre>` elements with D3's `select` and `append` methods.

YYF

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

70% match

Loading thumbnail…

Data Table Summary

This example displays a text-based summary of a beer dataset loaded from a CSV file, showing the total row count, column count, and file size in kilobytes, followed by the first ten rows as formatted JSON. The code uses D3 v5 methods `select` and `csv` to fetch and parse the data, then appends `pre` elements to the body. The text is styled with a black background and green monospace font via CSS. The dataset originates from Jean-Nicholas Hould’s craft-cans collection on Kaggle.

Jjons288

70% match

Loading thumbnail…

CSV Data

This example displays a summary of a remote CSV file's contents: its approximate size in kilobytes, the number of data rows, and the number of columns. It fetches the data from a GitHub gist URL using the `d3.csv` API, then formats the loaded data with `d3.csvFormat` to calculate its length. The resulting statistics are rendered as large text inside an HTML `<pre>` element, which is updated via JavaScript's `textContent` property. The styling is applied through a CSS class that sets the font size.

SSam Hege

69% match

Loading thumbnail…

Loading and Parsing FlavorsOfCacao.csv

This example shows a minimal loading and parsing routine for a CSV file containing chocolate bar ratings. It fetches the FlavorsOfCacao.csv dataset from a remote Gist URL and uses the D3 v5 `d3.csv` method to asynchronously ingest the data, then displays the file size in kilobytes, the row count, and the column count as large text in an HTML `<pre>` element. The code also includes commented-out alternatives using `fetch` with `async`/`await` and `d3.csvParse`, illustrating different parsing approaches.

TT-Reiser

69% match

Loading thumbnail…

Cocktail Ingredient Pairings

A bartender can filter a dataset of over 400 cocktails by a main alcohol to see a ranked horizontal bar chart of the 20 most common co-ingredients. The chart counts how often each ingredient appears with the selected spirit, with a tooltip showing the exact count. The interactive React app uses D3’s `scaleBand` and `scaleLinear` for layout, with filtering, grouping, and ranking done via array methods and `d3.nest`. Data comes from a remote CSV file parsed with `d3.csv`.

KKeerthiKandadai

68% match

Loading thumbnail…

Load and Viz Data

This example demonstrates loading a CSV file from a GitHub gist using D3 v5 and displaying basic statistics about the dataset, including its size in kilobytes, row count, and column count. The visualization renders these metrics as plain text in a large HTML `<pre>` element. The code uses the `d3.csv` method to fetch and parse the data asynchronously, then calls `d3.csvFormat` to measure the formatted string length. The commented sections show alternative approaches using `fetch` and `d3.csvParse`.

Iikerson

68% match