Scatter Plot (animated, menu including species)

Scatter Plot with Menu

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus. Users select which attribute appears on each axis, and the SVG scatter plot updates the x and y scales accordingly. The visualization uses React hooks for state management, d3.scaleLinear for scaling, and d3.extent for domain calculations. Data is loaded asynchronously from a CSV file using d3.csv, with numeric values parsed on ingestion. The interface includes custom axis components with tick marks and axis labels.

SSam Hege

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

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

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that select which attributes appear on each axis. The visualization uses React for state management and D3 v7 for scales and SVG rendering, with axes generated by custom axis components and circles representing individual flowers. Data is loaded asynchronously via D3’s `csv` parser from a remote GitHub gist, and the plot updates dynamically as menu selections change.

Ww.fukuyama@gmail.com

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 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 Animations

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers independently select which numeric column appears on the X and Y axes, triggering smooth animated transitions of the data points and axis scales. Built with D3 v6, the visualization uses `scaleLinear`, `transition` for the 1-second animations, and the `selection.join` API to efficiently manage the SVG circles as data mappings change. Each circle animates its position with a slight per-point delay, creating a cascading effect during updates.

DDasbach.EJ

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