Scatter plot with menus and colors

100%

Scatter plot with menus and colors

✓ Published1🌍 Public

Last edited May 1, 2021

Created on May 1, 2021

Forked from Polished scatter plot with menus

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.

AI-generated description

Scatter plot of iris dataset using d3 and keeps track using react

MIT Licensed

Similar vizzes

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

95% 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 dropdown menus. The plot uses React dropdowns to control the axes, with d3.scaleLinear for positioning and d3.scaleOrdinal for species-based coloring. Hovering over the color legend highlights points of a selected species, using React’s useState to manage the hovered value, while SVG circles render each data point with tooltips.

CCatalina Vajiac

95% match

Loading thumbnail…

Scatter plot with menus

A scatter plot of the Iris Dataset allows users to explore relationships between flower measurements via two dropdown menus for selecting X and Y axes. Points are colored by species, with a legend that dims non-hovered categories. Built with React and D3 v7, the visualization uses `scaleLinear`, `scaleOrdinal`, `extent`, and `csv` for data loading, rendering as SVG with custom axis components and ReactDropdown for the menus.

FFrederick O'Brien

95% match

Loading thumbnail…

Scatter Plot with Menu and Colors

An interactive scatter plot of the Iris dataset allows users to explore relationships between flower measurements by selecting which attributes appear on the X and Y axes via React dropdown menus. The visualization uses D3’s `scaleLinear` for axes and `scaleOrdinal` for categorical species colors, with React rendering SVG circles for each data point. Tooltips show formatted axis values on hover, and axis labels update based on the selected attributes. Data is loaded asynchronously with D3’s `csv` and parsed into numeric values.

AAdriana Rodriguez Sanabria

94% match

Loading thumbnail…

Scatter Plot with Menus and Colour

This scatter plot of the Iris dataset uses interactive dropdown menus to explore relationships between measurements. Users can select different attributes for the X and Y axes, and the visualization color-codes each point by species using a D3 ordinal scale. Built with React and rendered as SVG, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and custom React components for the dropdowns and marks. The plot includes axis labels and tick formatting via `format('.2s')`, with tooltips showing the x-value on hover.

NNikita Toropov

94% match

Loading thumbnail…

Scatter Plot with Menus with color scale

This interactive scatter plot displays the Iris dataset, with dropdown menus allowing users to select which flower measurements appear on the X and Y axes. Points are colored by species using a D3 ordinal color scale. Built with React and D3 v5, the visualization renders SVG circles and creates linear scales for each axis, with axis ticks generated by explicit React components for bottom and left axes.

Rrajamrit-singh

94% match

Loading thumbnail…

Scatter Plot with Color and Menus

A scatter plot of the Iris Dataset with interactive menus for selecting which attributes map to the x- and y-axes. The species of each flower determines the color of its circle, with a fixed ordinal color scale. The visualization uses React with the `react-dropdown` library to render the menus, and D3 v6 for data loading, scales, and SVG axis generation. Data is loaded from a CSV file using `d3.csv`.

SSonja Ek

94% match

Loading thumbnail…

colorised scatter plot with menu

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements. Two dropdown menus let viewers select which attribute appears on the x-axis and y-axis, with the plot updating in response to their choices. Points are color-coded by species using a d3.scaleOrdinal function. The visualization uses React for state management and rendering, with D3 v5 (scaleLinear, extent, csv) handling data loading and scales, and SVG circles displaying each data point.

MMATTE-blz

94% match