Iris Scatter Chart with Menus

100%

Iris Scatter Chart with Menus

✓ Published1🌍 Public

Last edited Feb 23, 2022

Created on Feb 23, 2022

This interactive scatter chart displays the classic Iris flower dataset, plotting sepal and petal measurements as SVG circles with dropdown menus to switch which measurements appear on the x- and y-axes. Built with React hooks, the chart uses d3.scaleLinear for both axes and d3.extent to compute domains from the CSV data loaded via d3.csv. The axes are rendered as custom React components that map tick values to SVG lines and text labels, while each data point includes a native title element for hover tooltips.

AI-generated description

Iris Scater Chart [Iris Data] (https://gist.githubusercontent.com/curran/a08a1080b88344b0c8a7/raw/0e7a9b0a5d22642a06d3d5b9bcbad9890c8ee534/iris.csv)

MIT Licensed

Similar vizzes

Loading thumbnail…

Iris 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 to plot on the x-axis and y-axis, with the chart dynamically updating the scales and axis labels. Built with React and D3 v7, the visualization uses `scaleLinear` for axes, `extent` for domain calculation, and SVG rendering for the scatterplot marks. Data is fetched from a GitHub gist using D3's `csv` loader, with axis components defined as reusable React functions.

JJames Rhodes

94% match

Loading thumbnail…

Polished Iris Scatter Chart with Menus

This interactive scatter chart displays the classic Iris dataset, allowing users to toggle which flower measurements appear on the x and y axes via dropdown menus. Built with React and D3 v7, the visualization renders circles as SVG marks inside a polished chart with labeled axes and tooltips. The axis scales are computed using D3’s scaleLinear and extent functions, while the menus are implemented with the ReactDropdown library. Data loading is handled through D3’s csv method with numeric parsing.

RRichardPearce60

94% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, plotted with D3 scales and rendered as SVG circles via React components. Two dropdown menus, built with React state, let users select which of the four flower measurements (sepal length/width, petal length/width) to map to the x- and y-axes, with axis labels updating accordingly. The visualization uses `d3.csv` for data loading, `d3.scaleLinear` for axes, and custom React components for axes and marks, with native SVG `<title>` elements for hover tooltips.

LLisa Wagner

94% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris flower dataset, which contains measurements of sepal and petal dimensions across three species. Users can dynamically select which numerical attribute appears on the x-axis and y-axis using dropdown menus built with React hooks (useState). The visualization uses d3.scaleLinear for both axes, computes domains via d3.extent, and renders the plot as an SVG with custom React components for the axes and circular marks. D3’s csv loader fetches the data from a remote GitHub gist, and axis ticks are formatted with d3.format.

FFonda Irena Santoso

93% 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 by selecting which attributes appear on the X and Y axes via dropdown menus. The visualization renders each flower as an SVG circle, with tooltips showing exact values on hover. Built with React for the interface and D3 v5 for scales, axes, and data loading through `d3.csv`, the chart updates scales and labels dynamically when menu selections change. The code uses `scaleLinear` with `extent` for domain calculation and custom React components for the axes and dropdowns.

Wwinniepooh520

93% match

Loading thumbnail…

Scatter Plot With Menues

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Dropdown menus dynamically select which numerical attribute appears on each axis, updating the chart in real time. Built with React and D3 v6, the visualization uses d3.scaleLinear for scales and d3.extent for domains, rendered as SVG circles with tooltips. The code loads the data via d3.csv and demonstrates reusable axis and mark components.

Ppsabela

93% match

Loading thumbnail…

scatter chart with menus

This interactive scatter chart displays the Iris flower dataset, plotting sepal length against sepal width using React components for rendering and D3.js scales for positioning. The visualization includes dropdown menus for selecting different data attributes, along with axis labels and tick marks generated from D3’s scaleLinear and extent functions. SVG circles represent individual data points, with tooltips showing formatted values. The chart loads CSV data asynchronously through a custom `useData` hook that parses numeric fields.

Vvijaytayal

93% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements via dropdown menus. The chart displays data points as circles, with the x-axis and y-axis representing selected attributes like petal length or sepal width. Built with React and D3 utilities, the visualization uses d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.csv for data loading. Users switch attributes through React state management, triggering real-time updates to the axes and marks rendered as SVG circles with tooltips.

LLaura Johnson

93% match