Interactive scatter Plot with menu

100%

Interactive scatter Plot with menu

✓ Published1🌍 Public

Last edited Oct 24, 2024

Created on Oct 23, 2024

This interactive scatter plot explores the Iris Dataset, displaying measurements of sepal and petal dimensions for three flower species. Users can select which attributes to plot on the x-axis and y-axis using React Dropdown menus, with options for sepal length/width, petal length/width, and species. The visualization renders as an SVG using React components, with D3 scaleLinear functions mapping data ranges to pixel coordinates, and custom AxisBottom and AxisLeft components drawing tick marks and labels. Hovering over a circle reveals the corresponding measurement value via a native title tooltip.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot With menu

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which flower measurements (sepal length, sepal width, petal length, petal width, or species) appear on the x- and y-axes via React dropdown menus. The SVG visualization uses d3.scaleLinear for both axes, with d3.extent and d3.max for domain calculation, and renders circles with native tooltips. The React components (AxisBottom, AxisLeft, Marks, Dropdown) manage the state-driven re-rendering as users change axis selections, pulling data asynchronously via d3.csv.

Aadewole-top

96% match

Loading thumbnail…

Interactive scatter multi-colored plot with menu

This interactive scatter plot displays the Iris dataset, letting users explore relationships between sepal and petal measurements. The visualization uses D3 scales to map data attributes to SVG coordinates, with React dropdown menus controlling which measurements appear on the x and y axes. A color legend assigns distinct hues to the three iris species, and hovering over a legend item filters the displayed points to that species. The chart renders marks as SVG circles with hover tooltips, while custom tick marks and axis labels provide context.

JJulien Tremblay

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

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

95% match

Loading thumbnail…

Scatterplot with menus

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which attribute appears on each axis, with options including sepal length, sepal width, petal length, petal width, and species. The visualization uses React to manage state for the selected axes and D3 v5’s `scaleLinear`, `extent`, and `csv` to load and scale the data. SVG circles render each data point with a tooltip, while custom React components draw tick marks, axis labels, and the dropdown controls.

Mmartinbirch@outlook.dk

95% match

Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot displays the Iris dataset, allowing exploration of relationships between sepal and petal measurements. Users select which attributes to plot on the x and y axes using dropdown menus, with axis labels updating to reflect the chosen variables. The visualization is built with React and rendered as SVG using d3.v7's scaleLinear function for coordinate mapping. The data is loaded from a CSV file using d3.csv, and the plot includes title formatting, axis ticks, and tooltips for data point inspection.

Jjackcaldwellnichols

95% match

Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between four numeric measurements—sepal length, sepal width, petal length, and petal width—by selecting which attribute appears on each axis via two dropdown menus. The visualization renders data points as SVG circles, with scales created using d3.scaleLinear and extents computed via d3.extent. Axis components generate tick marks and labels, while React hooks manage the selected attributes and trigger re-renders upon menu changes. The data loads asynchronously from a CSV file using d3.csv.

KKolezhannochka

95% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus that control which attributes appear on the x and y axes. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.extent to compute domains, and d3.csv to load data. SVG circles represent individual flowers, with tooltips showing exact values. The interface includes labeled axes that update dynamically, styled with custom CSS and the Poppins font.

SSabin Bhandari

95% match