Fork of Reusable Scatter Plot

100%

Fork of Reusable Scatter Plot

✓ Published0🌍 Public

Last edited Apr 1, 2025

Created on Apr 1, 2025

This example presents an interactive scatter plot that visualizes the relationship between various chemical properties and quality ratings in a wine dataset. The chart cycles through different x-axis variables—alcohol content, pH, residual sugar, and volatile acidity—every three seconds, with points colored according to wine quality on a gradient scale. Built using d3.v6, the visualization employs a reusable `scatterPlot()` module with chainable setters for configuration. It renders SVG elements with animated axis transitions, grid lines, and a legend showing the quality color mapping.

AI-generated description

MIT Licensed

Similar vizzes

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

88% match

Loading thumbnail…

scatter plot on wine

This interactive scatter plot matrix visualizes the relationships among several chemical properties of red wine, with each cell showing a pairwise comparison of attributes like fixed acidity, volatile acidity, and pH. Color-coded points represent wine quality ratings, and users can brush over a cell to highlight corresponding data points across all other plots, with tooltips revealing exact values on hover. Built with D3 v4, the visualization uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.brush` for interactive selection. The data comes from the included `winequality-red.csv` file, rendered as SVG elements within a grid layout.

TThanaporn-sk

86% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot 11719939

This scatter plot visualizes the relationship between sulphates and quality in a wine dataset. It shows individual data points as small steel-blue circles, with the distribution revealing potential correlations between the two variables. The visualization is built using D3 v7, creating an SVG chart with linear scales for both axes and a simple data loading pipeline. The code uses `d3.csv()` to fetch the WineQT dataset from a GitHub Gist, then applies padding to the scale domains and renders axes with `d3.axisBottom` and `d3.axisLeft`.

AArram Anila

85% match

Loading thumbnail…

Fork of HTML Starter

This scatter plot displays the relationship between two continuous variables across a dataset of wine quality metrics, plotting each sample as a circle. Built with D3 v7, the visualization uses `d3.scaleLinear` to map data values to pixel coordinates and `d3.axisBottom` and `d3.axisLeft` to render labeled axes. The SVG output includes interactive-friendly features like configurable margins, point radius, and opacity, with a chainable API for setting the x and y accessor functions and axis labels.

Bbassansackey@gmail.com

85% match

Loading thumbnail…

Fork of Fork of Reusable Scatter Plot

This scatter plot visualizes the relationship between fixed acidity and volatile acidity in wine samples. The D3.js v6 code loads CSV data and renders circles on an SVG canvas using `d3.scaleLinear` for axes and `d3.extent` to determine the domain. The x-axis uses `d3.axisBottom` and the y-axis `d3.axisLeft`, with points colored steelblue.

Bbhargavinalamothu@gmail.com

84% match

Loading thumbnail…

Wine quality

This interactive scatter plot explores the chemical attributes of white wine samples from a dataset of wine quality. Users select any two attributes via dropdown menus to visualize their relationship, with axis labels updating dynamically and points rendered as circles. The visualization uses D3.js for scales and CSV parsing, React for state management and UI components, and SVG for rendering. The data comes from a GitHub-hosted CSV file of wine quality measurements.

Ssb15jr@student.aau.dk

84% match

Loading thumbnail…

ICE7 - Reusable Scatter Plot

This example presents a reusable scatter plot that animates through four different x-axis variables (pH, volatile acidity, chlorides, and fixed acidity) from a wine dataset, while the y-axis remains fixed on acidity. The visualization maps wine types (red and white) to distinct colors and shapes, with an animated legend updating every two seconds. Built with D3 v6, it uses a custom `scatterPlot` API that implements the `scaleLinear`, `axisLeft`, and `axisBottom` functions for scalable chart construction. Data is loaded via `d3.csv` from a remote URL, and all rendering occurs in SVG with continuous animation.

SSatyaVineeth

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

83% match