Polished Scatter Plot with Menus and dynamic selection

100%

Polished Scatter Plot with Menus and dynamic selection

✓ Published0🌍 Public

Last edited Jan 13, 2022

Created on Jan 12, 2022

Forked from Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, displaying four measurements (sepal and petal length/width) with species color-coded. Dropdown menus dynamically select which attributes map to the x and y axes, while hovering over the color legend highlights the corresponding species by increasing its opacity and dimming others. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG circles rendered from CSV data.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Polished Scatter Plot with Menus with more colors

This interactive scatter plot visualizes the classic Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across three species. Two dropdown menus enable selection of the x and y axes from four numerical attributes and the species label, with colors distinguishing species via a legend. Built with React and D3 v5, the visualization uses `scaleLinear` and `scaleOrdinal` scales to map data to SVG circles, with axes rendered by custom components and data loaded via the `csv` function.

FFonda Irena Santoso

95% match

Loading thumbnail…

Polished Scatterplots with Menus and Color

This interactive scatterplot displays the Iris flower dataset, allowing users to explore relationships between four measurements—sepal and petal length and width—through dropdown menus that control the x and y axes. Species are distinguished by color in a legend. Built with React and D3 v7, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG rendering for all marks and legends.

Rrmgoldberg24

95% match

Loading thumbnail…

Polished Scatter Plot w/ Menus AND Color

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric measurements (sepal and petal length/width) while color-coding points by species. Two dropdown menus, built with `react-dropdown`, let viewers dynamically select which attributes appear on the x- and y-axes, with axis labels updating accordingly. The visualization uses `d3.scaleLinear` for positional encoding, `d3.scaleOrdinal` to assign categorical colors to the three Iris species, and React hooks (`useState`, `useEffect`) to manage data loading and UI state. SVG circles are rendered via custom React components, with tooltips showing formatted values.

AAnthony Ynami

95% match

Loading thumbnail…

Polished Scatter Plot with Menus and Color

This interactive scatter plot visualizes the Iris dataset, showing relationships between four flower measurements with points colored by species. Users can switch the X and Y axes via dropdown menus powered by ReactDropdown. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for species colors, and scales computed with d3.extent and d3.nice. SVG circles include tooltip titles, while axis components render ticks and labels.

LLisa Wagner

94% match

Loading thumbnail…

Polished Scatter with Menus

A React-based scatter plot of the Iris dataset visualizes relationships between four flower measurements (sepal length/width, petal length/width). Interactive dropdown menus let users select which measurement drives the x- and y-axes, with species color-coded via a d3.scaleOrdinal legend. The SVG rendering uses d3.scaleLinear for axes and custom React components (AxisBottom, AxisLeft, Marks) to generate ticks and circles, while the data loads asynchronously via d3.csv through a custom useData hook.

Mmbooch22

94% match

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions across species. Dropdown menus allow users to select which numerical attribute appears on the x- and y-axes, with the chart updating immediately via React state. The visualization uses d3.scaleLinear for both axes, renders SVG circles through React components, and includes axis tick marks generated with xScale.ticks(). Data is loaded asynchronously from a CSV using d3.csv, with React hooks managing the fetching and selection state.

Wwinniepooh520

94% match

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. 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 SVG chart uses d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.csv for data loading. Custom React components render the axes, marks, and dropdowns, with tooltips displaying formatted values on hover.

Llaplantalaplanta

94% match

Loading thumbnail…

Polished Scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, depicting measurements of sepal and petal dimensions for three flower species. Users can dynamically select which quantitative attribute to map to the x-axis and y-axis through dropdown menus, with points colored by species and a corresponding legend. The visualization is built using React with D3’s `scaleLinear`, `scaleOrdinal`, and `extent` functions to compute scales, while SVG components like `AxisBottom`, `AxisLeft`, and `Marks` render the axes, circles, and tooltips. Data is loaded asynchronously via `d3.csv` from a remote GitHub source.

JJonas Carvalho

94% match