ABV Craft Beer

100%

ABV Craft Beer

✓ Published0🌍 Public

Last edited Sep 23, 2018

Created on Sep 19, 2018

This scatterplot-style line chart visualizes the relationship between alcohol by volume (ABV) and ounces per can for a collection of craft beers, sourced from the Craft Cans Kaggle dataset. The visualization, built with D3 v5, sorts beers by ABV and uses a basis curve to smooth both the area fill and the line path, which are generated via `d3.area` and `d3.line`. Axes are rendered using `d3.axisLeft` and `d3.axisBottom`, with gridlines and labels, and the SVG output includes a title and clearly labeled axes for ABV and ounces.

AI-generated description

This line chart shows ABV vs. Ounces Per Can for a collection of craft beers. The data comes from Craft Cans.

MIT Licensed

Similar vizzes

Loading thumbnail…

ABV Craft Beer

This scatterplot displays the relationship between ABV (alcohol by volume) and ounces per can for craft beers, with each point representing a beer sorted by ABV. The D3.js v5 code uses `scaleLinear` for both axes, `axisLeft` and `axisBottom` for gridlines, and `area` with `curveBasis` to generate a smooth curve over the data. The chart also draws a maroon line path using `line` with the same basis curve. The data is loaded from a CSV via `csv`, with ABV values multiplied by 100, and renders as SVG within a 960x500 canvas.

Jjons288

95% match

Loading thumbnail…

Beer Style

This visualization explores the craft beer landscape by showing how the top 20 beer styles vary in rating, popularity over time, ABV, IBU, and production across US states. It combines multiple linked charts, including kernel density plots for ratings, ABV, and IBU, plus a state-based histogram, using D3 v7’s `kde` and `epanechnikov` functions for density estimation. Users interact via a multi-select dropdown and slider to filter beer styles and rating ranges, with SVG transitions updating the charts. The data appears to come from a beer review dataset, with the visualization built using D3 and jQuery UI for the slider, and rendered as animated SVG elements.

CChao Pang

72% match

Loading thumbnail…

scattered plot

This scattered plot maps beer styles by their typical alcohol content (ABV) and bitterness (IBUs). Each node represents a style, positioned according to its value ranges, with some styles showing a single point where data is unknown. The visualization uses D3.js v4 to create an SVG scatter plot, reading the dataset from an array of objects. It reveals the relationship between strength and hoppiness across a wide range of beer categories, from light lambics to imperial IPAs.

GGerardoFurtado

72% match

Loading thumbnail…

Craft Breweries in California

This visualization displays a simple bar chart of aggregated annual death counts in Syria from 2011 to 2018, using data sourced from the Violations Documentation Center. The page renders an SVG rectangle as a placeholder, while D3 v4 selects an `h3` heading to change its color and font size, and creates an unordered list of fruits. The code demonstrates basic D3 data binding with `selectAll`, `data`, and `enter`, though the actual bar chart for the CSV data is not implemented.

KKaitlyn Trudeau

66% match

Loading thumbnail…

Alcohol Vega Lite

This example uses a scatterplot to compare beer servings and total liters of pure alcohol consumed per country, with tooltips revealing country names on hover. It fetches data from the FiveThirtyEight alcohol-consumption GitHub repository using D3’s `csv` loader, then renders the chart with Vega-Lite via the vega-lite-api wrapper, which registers Vega and Vega-Lite and uses vega-tooltip for interactions. The visualization adapts to the full window size and applies custom axis and label styling from a config object.

Ddvinubius

66% match

Loading thumbnail…

Alcohol Consumption in U.S.

This visualization depicts beer consumption per person in the U.S. from 2000 to 2017, using a filled area chart with a smooth curve to highlight the trend over time. It employs D3 v5 with SVG rendering, leveraging `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the path, alongside `axisBottom` and `axisLeft` for labeled axes. Data is loaded via `csv` from a VizHub-hosted dataset, with years parsed as dates and beer values converted to numbers.

CChooo4u

66% match

Loading thumbnail…

K-means clustering of wine data

This visualization demonstrates the results of K-means clustering on the wine dataset, plotting each sample as a dot based on its Alcohol and Malic attributes, with colors indicating cluster membership. The code uses D3.js v3 to render an SVG scatterplot, employing d3.scale.linear for axes, d3.svg.axis for tick marks, and d3.scale.category20 for coloring clusters. Mouseover events trigger a tooltip showing cluster, Alcohol, and Malic values. Data comes from the clusters.csv file, which includes precomputed cluster assignments.

JJverma

66% match

Loading thumbnail…

Beer Consumption in U.S.

This visualization shows beer consumption per person in the U.S. over time, using a filled area chart with a smooth curve. The chart plots yearly data with the y-axis labeled in liters per person. It is built with D3 v5, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and an `area` generator with `curveBasis`. The code also references multiple line generators and a color legend for additional series, though the primary dataset comes from a CSV file on VizHub. The SVG renders with custom styling for axis labels and title.

CChooo4u

65% match