Skip to main content
SimilarExport ZIP
100%

Coffee Scatter Plot

✓ Published0🌍 Public
OOxfordComma
Last edited Sep 30, 2018
Created on Sep 8, 2018

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.

AI-generated description

These data were scraped from the Coffee Quality Institute (CQI) by James LeDoux, and are currently hosted in his GitHub repo. This dataset (hosted on VizHub) includes a number of attributes that describe the taste on a scale from 1 to 10, and I thought that flavor and aroma could be correlated. This graphic shows the comparison of flavor versus aroma for the first 500 samples in the dataset. It seems as though I was correct, and that flavor and aroma are correlated.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Scatter Plot of Flavors Of Cocoa showing CocaoPercent (X) vs. Rating (Y)

A D3 scatter plot visualizes the relationship between cocoa percentage and flavor rating for chocolate bars, with each circle representing a sample. The x-axis maps the cocoa percentage while the y-axis shows the ratings, revealing potential correlations. Built with d3.v6, the code uses d3.csv for data loading, d3.scaleLinear for both axes, d3.extent for domain calculation, and d3.axisLeft/axisBottom for rendering. Data comes from the FlavorsOfCacao.csv dataset, rendered as SVG circles sized with a fixed radius of five pixels.

TT-Reiser
76% 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…

ScatterPlot

This scatter plot correlates countries’ GDP per capita with their coffee export volumes, positioning each country as a dot according to economic status and export scale. The visualization uses D3.js v7 with SVG rendering, loading a remote CSV dataset from GitHub. Both axes display the underlying values, with the chart applying linear scales via `d3.scaleLinear` and rendering circles with a semi-transparent blue fill.

Jjammigumpula.priyanka193@gmail.com
71% match
Loading thumbnail…

Scatterplot Chocolate Data

This scatterplot visualizes chocolate data, plotting the count of ingredients against cocoa percentage. Each brown, semi-transparent circle represents a chocolate bar, with its position determined by these two variables. The visualization is built using D3 version 6, leveraging functions like `csv` for data loading, `scaleLinear` for scaling axes, and `axisLeft` and `axisBottom` for generating the axes. The plot renders as an SVG, sized to fill the browser window, and uses data from a raw CSV file hosted on GitHub.

LLeah Mitchell
70% match
Loading thumbnail…

Scatter Plot

A simple scatter plot displays categorical labels on the vertical axis and numeric values on the horizontal axis, with circles sized at 18 pixels. The data comes from a CSV file, and the chart uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, with a tick format converting large numbers to abbreviated units. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, and the visualization is built using SVG elements selected through `d3.select`. The chart includes a title and axis labels styled via CSS.

CChocoOrange
69% match
Loading thumbnail…

Cereals Scatter Plot

A scatter plot maps cereal sugar content on the x-axis against consumer ratings on the y-axis, using red, semi-transparent circles to reveal the negative correlation between sweetness and approval. Built with D3 v5, the visualization uses `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and `scaleOrdinal` with `schemeCategory10` for a legend identifying each cereal by name. Data comes from a CSV file, rendered as SVG elements.

Ssrrajendran
69% match
Loading thumbnail…

Scatter Plot

This scatter plot shows the relationship between the ratings and sugar content of various cereals. Each circle represents a cereal, positioned along the y-axis by its sugar level and the x-axis by its rating score. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.scalePoint for the axes, and d3.axisLeft and d3.axisBottom to render them in an SVG. A title and axis label are included, though the data source URL points to a cereal dataset from GitHub.

Vvpruden1
69% 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
68% match