Scatter Plot with Menus and Interactive color legend on Wine Recognition Dataset

100%

Scatter Plot with Menus and Interactive color legend on Wine Recognition Dataset

✓ Published0🌍 Public

Last edited Oct 29, 2020

Created on Oct 14, 2020

Forked from Scatter Plot with Menus on Wine Recognition Dataset

This interactive scatter plot lets users explore the Wine Recognition dataset by selecting any two of thirteen chemical attributes for the x- and y-axes via dropdown menus. A categorical color scale distinguishes the three wine classes, and the interactive legend highlights points from one class at full opacity while dimming the others on hover, with tooltips revealing the exact values. Built with React and D3 v5, the visualization uses `d3.scaleLinear` and `d3.scaleOrdinal` for scales and renders SVG circles, with axes generated by custom components.

AI-generated description

A scatter plot of Wine recognition dataset.

Used technic from Scatter Plot with Color Legend

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus on Wine Recognition Dataset

This scatter plot from the Wine Recognition dataset lets users explore relationships between 13 chemical attributes of three wine varieties. Dropdown menus select which attributes appear on the x- and y-axes, while a fixed color encoding distinguishes the wine classes. Built with React and D3 v5, the SVG visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and renders circles with tooltips that display the wine type and coordinate values. The data is loaded as CSV via `d3.csv`.

Llintonylin

96% match

Loading thumbnail…

wine_scatterplot_menus

This interactive scatterplot explores chemical properties of red and white wines, allowing users to compare any two numeric variables from the dataset through dropdown menus. The visualization filters wines by type and renders maroon circles for red wines or golden circles for white wines. It uses D3 v5 with SVG and animated transitions, where circles expand from the plot center to their positions over one second. The code employs `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.csv` for data loading.

SSophia Cofone

86% 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…

Polished Scatter Plot with Menus

Two dropdown menus control which numeric attributes of the wine quality dataset are plotted on the x- and y-axes. The scatter plot uses React for the interface, with d3.scaleLinear for axes, d3.extent for domains, and SVG circles for marks. Each circle includes a native `<title>` tooltip, while the menus are built with ReactDropdown. The data loads asynchronously via d3.csv.

Llzb1003

83% match

Loading thumbnail…

Dataviz 9 - Scatter plot with Menus (Interactive Colour Legend)

This interactive scatter plot displays the classic Iris dataset, letting users choose any two attributes for the x- and y-axes via React dropdown menus. The visualization uses an interactive color legend where hovering over a species name dims all other points, highlighting the selected species. Built with React and D3 v5, the chart uses `scaleLinear` and `scaleOrdinal` to map measurements and species to positions and colors, rendering all marks as SVG circles.

RRyAlpha

83% match

Loading thumbnail…

Scatter Plot 4: Menus,Colors, Interactive Legend

This interactive scatter plot visualizes the Iris dataset, letting users choose which attributes appear on the X and Y axes via dropdown menus. A color legend categorizes points by species, and hovering over a legend entry highlights only the matching points while fading others. Built with React and D3 v5, the chart uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and SVG rendering for marks and interactive legend controls.

Zzeeeeem

82% match

Loading thumbnail…

Wine Equality

This interactive visualization explores relationships among chemical attributes of red wine samples from a CSV dataset. Users select numeric attributes and a categorical color mapping, with an adjustable opacity slider. The chart renders as an animated, draggable parallel coordinates plot using D3.js v5, where axis anchor points can be repositioned. Dynamic selection updates the visualization through D3's data joins and event handlers.

Aarths-glitch

82% match

Loading thumbnail…

Scatter Plot with Menus and Colour

This scatter plot of the Iris dataset uses interactive dropdown menus to explore relationships between measurements. Users can select different attributes for the X and Y axes, and the visualization color-codes each point by species using a D3 ordinal scale. Built with React and rendered as SVG, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and custom React components for the dropdowns and marks. The plot includes axis labels and tick formatting via `format('.2s')`, with tooltips showing the x-value on hover.

NNikita Toropov

81% match