Skip to main content
SimilarExport ZIP
100%

dv.31 - scatter plot: w/ menus

✓ Published1🌍 Public
Zzach b.
Last edited Mar 18, 2021
Created on Nov 5, 2020

This interactive scatter plot visualizes the Iris Dataset, showing measurements of sepal and petal dimensions for three flower species. Users can dynamically select which attribute to display on the x-axis and y-axis via dropdown menus that populate the D3.js linear scales. The React application renders circles in SVG format, with species color-coded using d3.scaleOrdinal with the schemeCategory10 palette. Hovering over any circle reveals a tooltip with the species name and exact coordinates, while axis labels update to reflect the current selections.

AI-generated description

A scatter plot of The Iris Dataset.

--
Datavis 2020 #31

MIT Licensed

Similar vizzes

Loading thumbnail…

dv.32 - snazzy scatter plot: w/ menus

This interactive scatter plot visualizes the Iris Dataset, displaying measurements of sepal and petal dimensions with points colored by species. Two dropdown menus allow users to select which attribute appears on the X and Y axes, re-scaling the plot accordingly. Built with React and D3 v6, it uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for species colors, and renders SVG circles with tooltips showing exact values.

Zzach b.
97% match
Loading thumbnail…

Scatter plot with menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across flower species. Two dropdown menus dynamically control which quantitative attribute is displayed on the x- and y-axes, with axes, labels, and data points updating in real time. Built with React and D3 v5, the visualization renders as SVG, using d3.scaleLinear for axis scaling and d3.extent for data domains. Hovering over any circle reveals its exact value via SVG titles.

Nn.koldovsky@gmail.com
93% match
Loading thumbnail…

Scatter Plot w/ menu

This interactive scatter plot uses React and D3 to visualize the Iris flower dataset. Users explore relationships between sepal and petal measurements by selecting attributes for the x and y axes from dropdown menus. The plot encodes species using color, and hovering over the color legend highlights points of that species while fading others. The SVG visualization builds axes with D3 scales, formats tick labels with `d3.format`, and links the dataset via a custom React hook.

CCarlos Caballero
93% match
Loading thumbnail…

scatter with menus

This interactive scatter plot displays the Iris flower dataset, letting users explore relationships between sepal and petal measurements through dropdown menus that control the x and y axes. The visualization, rendered with React and D3 v7, uses `scaleLinear` for axes, `scaleOrdinal` for species coloring, and SVG circles for data points. Hovering over the color legend highlights a selected species while dimming others, and tooltips reveal exact values via SVG `<title>` elements.

JJosh Zalcman
93% match
Loading thumbnail…

dv2020-ep31-viz32 - scatter plot w/ menus (basic)

This interactive scatter plot displays the Iris dataset, allowing users to select which flower measurements appear on the X and Y axes via dropdown menus. Built with React and D3.js (d3.scaleLinear, d3.csv), it renders SVG circles with tooltips showing the selected values, while axis labels update dynamically based on menu choices. The visualization uses d3.extent, d3.min, and d3.max for scale domains, with a D3 tick system for axis generation.

Zzach b.
93% match
Loading thumbnail…

Interactive Menus Scatter Plots

This interactive scatter plot displays the Iris flower dataset, plotting measurements of sepal and petal dimensions for three species. Users select which measurement appears on each axis via dropdown menus, with the chart and axis labels updating accordingly. The visualization uses React with D3 v7, employing d3.scaleLinear for the x and y axes, d3.scaleOrdinal for species color coding, and d3.csv for data loading. The SVG rendering includes custom axis components and a color legend for species identification.

SSiddharthMittal07
92% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus let viewers select which attributes appear on the X and Y axes, while a color legend enables hovering to highlight specific species by dimming others. The visualization uses React for component state management, d3.scaleLinear and d3.scaleOrdinal for coordinate and color mapping, and renders as an SVG with reusable axis, mark, and legend components.

Sstevensmithj
92% match
Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which attributes appear on the x and y axes, dynamically updating the visualization. Built with React and D3 v5, the example uses `scaleLinear` for scaling, `extent` for domain calculation, and SVG circles for data points. The axes are custom React components that render tick marks and labels, while hover tooltips display formatted values via SVG `<title>` elements.

MMarat
92% match