ScatterWithDropdowns

Scatter Plot with Interactive Color Legend

This scatter plot visualizes the Iris dataset, showing relationships between four flower measurements with the x and y axes controlled by dropdown menus. The color legend is interactive: hovering over a species option fades non-matching points to 20% opacity while keeping the selected species fully visible. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for species colors, and inline SVG circles for data points. Dropdown components from react-dropdown handle attribute selection for both axes.

MMichael Bruno

ScatterWithDropdowns -- UsingD3Selects

This example displays the classic Iris dataset as a scatter plot, mapping petal length and sepal length along the x- and y-axes. The visualization uses D3’s `scaleLinear` for axes and `scaleOrdinal` for color coding, with a hoverable legend to highlight species. Built with React and D3 v5, the SVG is generated via D3 selections and the `join` API, while a dropdown menu offers interactive selection of the data columns to plot.

EEd Hutchinson

Scatter plot with interactive color legend

This interactive scatter plot visualizes the Iris dataset, showing relationships between flower measurements selected via dropdown menus. A color legend on the right highlights points by species, dimming all other data when a species is hovered. Built with React and D3 v7, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and renders SVG circles with tooltips. The dataset is loaded as CSV and parsed into numeric values for plotting.

AAlex Stulov

scatter with dropdown

This interactive scatterplot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers independently choose which attribute to plot on the X and Y axes, with axis labels updating accordingly. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, SVG circles for data points, and `csv` for data loading from a GitHub-hosted dataset. Tooltips display formatted values on hover, while the React `useState` hook manages the selected axis attributes.

Mmarianamartins87

Scatterplot V2 w/ menus

This interactive scatterplot visualizes the Iris dataset, allowing users to dynamically select which flower measurements appear on the x- and y-axes via dropdown menus. The chart renders as an SVG using React, with axes generated through custom components and scales from d3-scale. Dropdown menus are implemented with ReactDropdown and d3.csv loads the data. Axis labels update automatically to reflect selected attributes, and each data point includes a native SVG tooltip showing its x-value.

SSophia Cofone

Testing React Dropdown

This interactive scatter plot displays the Iris dataset, allowing users to select which floral measurements appear on the X and Y axes via dropdown menus. The visualization uses D3 scales for positioning and color encoding, rendered as SVG circles through React components. A color legend highlights individual species on hover by fading other data points, filtering the underlying display. The example demonstrates combining a React interface with D3's `scaleLinear` and `scaleOrdinal` for interactive exploration.

AAndrea Picciau

Scatterplot with color and legend

This interactive scatterplot displays the Iris dataset, with dropdown menus letting users choose which sepal or petal measurements appear on the x- and y-axes. Points are colored by species via a categorical color scale, with a legend showing the three iris varieties. Built with React and D3 v6, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and `csv` to load data from a GitHub gist. SVG rendering handles marks, axes, and legend, while the react-dropdown library provides the selection controls.

Ssurikmeetr

Stylized Scatterplot with menu

This interactive scatterplot displays the classic Iris flower dataset, allowing viewers to dynamically select which quantitative attributes appear on the X and Y axes through two dropdown menus. Each circle represents an individual iris flower, positioned according to the chosen variables, with tooltips revealing the precise X-axis value upon hover. Built with React and D3 v5, the visualization uses D3 scales and SVG rendering for the plot, passing data through custom components like `Marks` and `AxisBottom`. The dropdowns use `react-dropdown`, and the data is loaded asynchronously from a CSV file via D3’s `csv` parser.

MMark Lam