Scatter Plot with Menu

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus let viewers select which attributes appear on the X and Y axes, while a color legend enables hovering to highlight specific species by dimming others. The visualization uses React for component state management, d3.scaleLinear and d3.scaleOrdinal for coordinate and color mapping, and renders as an SVG with reusable axis, mark, and legend components.

Sstevensmithj

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

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

Scatter Plot w/ menu

This interactive scatter plot uses React and D3 to visualize the Iris flower dataset. Users explore relationships between sepal and petal measurements by selecting attributes for the x and y axes from dropdown menus. The plot encodes species using color, and hovering over the color legend highlights points of that species while fading others. The SVG visualization builds axes with D3 scales, formats tick labels with `d3.format`, and links the dataset via a custom React hook.

CCarlos Caballero

Scatter Plot With Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements across different species. Two dropdown menus, built with React, control which variables are plotted on the x and y axes. Hovering over a species in the color legend highlights those data points while dimming others, a feature implemented using React's `useState` and `onMouseEnter` events. Points are rendered as SVG circles using `d3.scaleLinear` for axes and `d3.scaleOrdinal` for colors, with the data fetched from a CSV file via `d3.csv`.

33ssalunke

Scatter plot with menu and colors

This interactive scatter plot visualizes the Iris dataset, showcasing measurements of sepal and petal dimensions. Users can dynamically select which attributes to display on the X and Y axes via dropdown menus. Hovering over the color legend highlights a specific species, fading the remaining data points to emphasize the selected group. Built with React and D3 v5, the visualization renders as an SVG and uses `scaleLinear` for axis scaling and `scaleOrdinal` for categorical coloring.

Ppatasky

scatter with menus

This interactive scatter plot displays the Iris flower dataset, letting users explore relationships between sepal and petal measurements through dropdown menus that control the x and y axes. The visualization, rendered with React and D3 v7, uses `scaleLinear` for axes, `scaleOrdinal` for species coloring, and SVG circles for data points. Hovering over the color legend highlights a selected species while dimming others, and tooltips reveal exact values via SVG `<title>` elements.

JJosh Zalcman

Scatter Plot With Menu

This interactive scatter plot visualizes the Iris Dataset, a classic multivariate flower dataset from a gist by Curran. Users can dynamically select which sepal or petal measurements appear on the X and Y axes using dropdown menus, and the plot updates accordingly. The visualization encodes species through color, with a color legend that supports hover interactions to fade non-matching points. Built with React and D3 v5, it renders axes, circles, and legend items as SVG elements, using scaleLinear, scaleOrdinal, and extent for scaling the data.

AAliaksandr