Skip to main content
SimilarExport ZIP
100%

Scatter Plot with menus

✓ Published0🌍 Public
SSushan Prajapati
Last edited May 25, 2021
Created on May 25, 2021

A scatter plot of the Iris dataset with dropdown menus for selecting which measured attribute appears on the x- and y-axes. The visualization renders as an SVG using React components, with D3 providing the linear scales, axis generation, and CSV data loading. Users can switch among sepal length, sepal width, petal length, petal width, and species for each axis, which updates the scales, axis labels, and plotted circles. Tooltips show tick values on hover.

AI-generated description

A scatter plot of [The Iris Dataset] with menu (https://gist.github.com/curran/a08a1080b88344b0c8a7).

MIT Licensed

Similar vizzes

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
96% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, featuring dropdown menus that let viewers select which numerical attributes to display on the x and y axes. The visualization renders data points as SVG circles using React components, with axes generated from D3 scales (scaleLinear) and tick formatting via the format function. Users can compare any combination of sepal and petal measurements, with axis labels updating dynamically to reflect the current selection. The chart loads CSV data asynchronously using D3’s csv parser, and menu interactions update state through React’s useState hook.

Vvesnaj
95% match
Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris Dataset displays sepal and petal measurements, with dropdown menus allowing users to select which attributes appear on the x- and y-axes. The visualization uses React with D3's `scaleLinear` and `extent` to map data to SVG circles, while axes are rendered via custom `AxisBottom` and `AxisLeft` components. The dropdowns update state to re-scale and re-render the marks dynamically, with formatted tick labels using D3's `format`.

RRajat Dangat
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 Menu

A scatter plot of the Iris dataset, implemented in React with D3.js for scales and rendering to SVG, allows exploration of relationships between sepal and petal measurements. Two dropdown menus select the attributes mapped to the x and y axes, while species determines point color. Hovering over a species in the color legend highlights only its points by filtering the data, with non-hovered points dimmed. The code uses D3's `scaleLinear`, `scaleOrdinal`, and `extent` for scales and data ranges.

Uuplusv
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 through two dropdown menus that select which attributes appear on the x and y axes. The visualization uses D3’s `scaleLinear` and `extent` functions to map data to SVG coordinates, while React manages component state and re-rendering when menu selections change. The data is loaded asynchronously via D3’s `csv` method, and circles represent individual flowers with tooltips showing the x-axis value.

MmohitPassan
95% match
Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset rendered in SVG, with dropdown menus to select which attribute appears on each axis. The visualization includes four numeric measurements—sepal length, sepal width, petal length, and petal width—as well as species. Built with React and D3 v7, it uses `scaleLinear` for axes, `extent` for domains, and React state to update the chart when menu selections change. The menus and labels are generated from a shared attribute list.

BBen Brophy
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