Beer Style

100%

✓ Published0🌍 Public

Last edited Dec 14, 2021

Created on Dec 13, 2021

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

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

73% match

Loading thumbnail…

ABV Craft Beer

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.

Jjons288

72% match

Loading thumbnail…

Beer Consumption in U.S.

This visualization displays beer consumption per person in the U.S. from 1890 to 2013, using a stacked area chart with brown and red semi-transparent layers representing beer and wine consumption over time. The chart includes dual y-axes for wine (left) and beer (right), with a timeline showing the prohibition era as zero consumption. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `axisRight`, and `area` with `curveBasis` to render smooth SVG paths from the provided CSV data.

CChooo4u

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

71% match

Loading thumbnail…

Beer Consumption in U.S.

This area chart displays beer consumption per person in the U.S. over time, with the x-axis representing years and the y-axis measuring litres per person. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to render the SVG path, alongside `axisBottom` and `axisLeft` for labeled axes. Data is loaded via `csv` from a VizHub-hosted dataset, and the chart includes a legend for multiple series, though the primary rendered element is the maroon area fill.

CChooo4u

71% match

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

71% match

Loading thumbnail…

Beer Consumption in U.S.

This visualization shows beer and wine consumption per person in the U.S. from 1890 to 2013, with the beer area in brown and the wine area in red overlaid on dual y-axes. It reveals the stark drop to zero during Prohibition (1920–1933) and the steady rise of beer consumption afterward. The code uses D3 v5 with `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and `d3.axisLeft`/`d3.axisBottom`, rendering SVG area charts with curves and axis labels. Data comes from the provided CSV file.

CChooo4u

70% match