scatter plot with menus

100%

scatter plot with menus

✓ Published1🌍 Public

Last edited Sep 22, 2021

Created on Sep 22, 2021

An interactive scatter plot of the Iris dataset allows users to select which flower measurements appear on the x- and y-axes via dropdown menus. Built with React and D3 v5, it renders points as SVG circles, with axes labeled according to the chosen attributes. D3’s `scaleLinear`, `extent`, and `csv` functions handle data loading and scaling, while React’s `useState` manages the selected dimensions. The plot’s axes are generated through custom React components, and hovering reveals exact values via SVG `<title>` tooltips.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot with menus

A scatterplot of the Iris dataset allows users to explore relationships between flower measurements by selecting which attributes appear on the X and Y axes via dropdown menus. The visualization uses React for component-based UI, with D3 v5’s `scaleLinear`, `extent`, and `csv` for data loading and scaling, rendering SVG axes and circle marks. Each point includes a tooltip showing the formatted X-axis value. The Iris data is fetched from a remote CSV file, and axis labels update dynamically based on the selected attributes.

LLove Wessman

96% match

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements via dropdown menus that select the variables for the x and y axes. Built with React and D3 v6, the visualization uses SVG circles and linear scales to plot data points, with axis labeling and tick formatting provided by custom components. The code leverages D3's `scaleLinear` and `extent` for scaling and domain calculation, and CSV data loading through the `csv` function, all rendered within a React-based SVG framework.

JJonas Carvalho

96% match

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, allowing exploration of relationships between four flower measurements. Two dropdown menus let users select which attribute is mapped to the x-axis and y-axis, dynamically updating the plotted circles and axis labels. The visualization is built with React and rendered as SVG, using D3 v5 utilities like `scaleLinear` for axes and `csv()` for data loading. Hovering over a point reveals its x-value via an SVG `<title>` tooltip.

AAndrea Picciau

96% match

Loading thumbnail…

Scatter plot with menus

This scatter plot of the Iris dataset displays the relationships between flower measurements, with interactive dropdown menus to select the attributes for the x and y axes. The chart shows all data points colored by species, and hovering over the color legend highlights a single species while fading the others. Built with React and D3, the visualization uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.extent` for scales and domains, while custom React components render SVG axes, circles, and the legend.

TTakuya Kitazawa

96% match

Loading thumbnail…

scatter plot with menus

A scatter plot of the Iris dataset, rendered as SVG, lets users explore relationships between floral measurements by selecting attributes for the X and Y axes from dropdown menus. Built with React and D3 v5, the visualization updates the axes and circles when new attributes are chosen, using d3.scaleLinear for data mapping and d3.extent to set domains.

Ggayatrisridhar

96% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements appear on the x- and y-axes via two dropdown menus. The visualization uses React hooks (useState, useEffect) to manage state and data loading, while D3 v5 (scaleLinear, extent, max, csv) handles scales, axes, and CSV parsing. Rendered as an SVG, each data point appears as a circle with a tooltip showing its value. The menus update the axes and labels dynamically, using d3.format for tick labels and React components for modular rendering.

Jjanneprice

96% match

Loading thumbnail…

Scatter plot with menu

This interactive scatter plot displays the Iris dataset, allowing viewers to select which floral measurements appear on the x- and y-axes via two dropdown menus. Built with React and D3 v7, the visualization renders points as SVG circles, with axes generated from d3.scaleLinear and extent functions. The code uses d3.csv for data loading and React's useState hook to manage attribute selections, while Bootstrap styles the menu controls.

GGabriel

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

95% match