Skip to main content
SimilarExport ZIP
100%

Interactive scatter colored plot with menu

✓ Published1🌍 Public
JJulien Tremblay
Last edited Oct 24, 2024
Created on Oct 24, 2024

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements such as petal and sepal length and width. Users can change which attribute appears on each axis using two dropdown menus built with react-dropdown. The visualization is rendered as SVG using React components for the axes and marks, while d3.v5 utilities like `scaleLinear` and `extent` compute the scales and domains. Dropdown selections update the plotted data dynamically through React state, with axes labeled according to the selected attributes.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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…

Interactive scatter Plot with menu

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.

JJulien Tremblay
95% match
Loading thumbnail…

polished scatter plot with menu

This interactive scatter plot displays the Iris dataset, with dropdown menus controlling which flower measurements appear on the x- and y-axes. The visualization uses React and D3 v5, rendering SVG circles colored teal against a white background. The axis components generate tick marks and labels using scaleLinear and d3.ticks, while the ReactDropdown component manages the selection of attributes like sepal length and petal width. Hovering over any circle reveals its value via an SVG title tooltip, and the layout includes custom axis labels with a fixed margin structure.

MMATTE-blz
94% match
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
93% match
Loading thumbnail…

scatter plot with menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between four measurements (sepal length/width and petal length/width). Two dropdown menus, built with React's useState hook and a custom Dropdown component, dynamically select which attributes map to the x-axis and y-axis. The visualization uses d3.scaleLinear for scales and d3.extent for domain calculation, rendering SVG circles with native `<title>` tooltips. Axes are generated manually through d3 scale ticks, with data loaded asynchronously via d3.csv.

MMohammed Banani | MbDev
93% match
Loading thumbnail…

Scatter plot Iris Flower with Menu

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions. Dropdown menus using `ReactDropdown` allow users to select which attribute maps to the X and Y axes, dynamically updating the chart. The visualization uses `d3.csv` to load data and `d3.scaleLinear` for axis scaling, rendering SVG circles within a React component. Axis ticks, labels, and marks are generated programmatically, with axis labels and styling using CSS classes for a clean presentation.

BBenjamín Salas Sadler
93% match
Loading thumbnail…

Scatter plot with menu and colors

This interactive scatter plot visualizes the Iris dataset, showcasing measurements of sepal and petal dimensions. Users can dynamically select which attributes to display on the X and Y axes via dropdown menus. Hovering over the color legend highlights a specific species, fading the remaining data points to emphasize the selected group. Built with React and D3 v5, the visualization renders as an SVG and uses `scaleLinear` for axis scaling and `scaleOrdinal` for categorical coloring.

Ppatasky
93% match
Loading thumbnail…

Scatter plot with menus and colors

This interactive scatter plot explores the Iris dataset, displaying species as colored points with selectable X and Y axes. Two dropdown menus, built with react-dropdown, let users choose which flower measurements to compare, while a color legend identifies the three species using d3.scaleOrdinal. The visualization uses React state management and SVG rendering through D3 scales and axes (scaleLinear, AxisBottom, AxisLeft) to redraw the chart whenever the selected attributes change.

MmohitPassan
93% match