scattered plot

100%

scattered plot

✓ Published0🌍 Public

Last edited May 2, 2019

Created on May 2, 2019

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Jesus82/'>Jesus82</a>'s block: <a href='http://bl.ocks.org/Jesus82/ad5c6fb46f8be5a9d3e763f8a1ba03d7'>scattered plot</a>

mit Licensed

Similar vizzes

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

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

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…

wine_scatterplot

A scatterplot shows wine quality ratings along the x-axis against alcohol content on the y-axis, with each wine represented as a semi-transparent golden circle. The visualization uses D3 v7’s `scaleLinear`, `axisBottom`, and `axisLeft` to map the data, which is loaded from a semicolon-delimited CSV file. The source data contains wine attributes like fixed acidity, pH, and sulphates, though only quality and alcohol are plotted. The SVG rendering includes gridlines and labeled axes, with circles sized at a fixed radius of 10.

SSophia Cofone

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

70% match

Loading thumbnail…

Reusable Scatter plot with Wine Quality Data

This reusable scatter plot visualizes wine quality data from a CSV file, mapping pH on the x-axis and alcohol content on the y-axis, with point color indicating quality ratings. Built with D3 v6, the example demonstrates loading D3 via UNPKG and using local ES6 modules. The `scatterPlot.js` module defines a reusable chart function with configurable width, height, margins, and radius, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes. The main script appends SVG circles, legends, and styled axis labels directly.

VVenkat-Sumith-Thota

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

70% match

Loading thumbnail…

Dumbbell Chart

This interactive scatterplot depicts alcohol consumption levels for 15 patients before and after a study, using dumbbell-style connected circles to highlight individual change. Each patient’s ID is plotted along the x-axis using `d3.scalePoint`, while alcohol measurements are mapped to the y-axis with `d3.scaleLinear`. The visualization is built with React components and rendered as SVG, employing D3’s `csv` loader for data parsing and custom `Marks` and `Lines` components to draw the paired circles and connecting lines.

WWaseem Medhat

69% match