ScatterWithDropdowns -- UsingD3Selects

100%

ScatterWithDropdowns -- UsingD3Selects

✓ Published0🌍 Public

Last edited May 14, 2023

Created on May 14, 2023

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.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!

MIT Licensed

Similar vizzes

Loading thumbnail…

ScatterWithDropdowns

This interactive scatterplot displays the classic Iris dataset, allowing users to choose which flower measurements appear on the x- and y-axes via two dropdown menus. A legend color-codes points by species, and hovering over a legend entry filters the displayed points. The visualization is built with React and D3 v5, using D3's `scaleLinear`, `scaleOrdinal`, and `extent` for scaling, while `csv` loads the data. Rendering is done as an SVG, with custom `AxisBottom`, `AxisLeft`, `Marks`, and `Dropdown` components.

EEd Hutchinson

91% match

Loading thumbnail…

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

89% match

Loading thumbnail…

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

88% match

Loading thumbnail…

Scatter Plots using d3

This interactive scatter plot visualizes the Iris dataset, allowing users to compare sepal and petal measurements across three iris species. Two dropdown menus let viewers select which attributes to plot on the X and Y axes, with points colored by species class. The visualization uses d3.scaleLinear for axis scaling, d3.axisBottom and d3.axisLeft for grid lines, and React dropdown components for menu selection. Data is loaded via d3.csv and rendered as SVG circles with CSS opacity and color coding.

Vvidhyanamini

87% match

Loading thumbnail…

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

87% match

Loading thumbnail…

Scatter Plot using d3

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two flower attributes via dropdown menus. The vanilla HTML version displays petal length against sepal length, using d3.csv to load data and d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to map values and render SVG axes. The React implementation adds selectable attributes with ReactDropdown and organizes charts into reusable components like AxisBottom and Marks, both rendering dynamic SVG circles.

Vvidhyanamini

87% match

Loading thumbnail…

React Scatter Plot w/ Menus, Color & Interactive Color Legend

This interactive React scatter plot visualizes the Iris dataset, letting users select which sepal or petal measurements appear on the X and Y axes via dropdown menus. Each mark is colored by species, and hovering over the color legend highlights matching points while dimming others. Built with d3.v5 scales (scaleLinear, scaleOrdinal) and SVG rendering, it uses React hooks for state management and ReactDropdown for the menus. Data loads asynchronously via d3.csv into a custom useData hook.

Hhunsingeruk@gmail.com

87% match

Loading thumbnail…

Scatterplot v5 w/ React (menus, color, interactivity (hover & fade)

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that change the x and y axes. Hovering over a species in the color legend fades out points from other species, highlighting the selected category. Built with React and D3 v5, the SVG visualization uses d3.scaleLinear, d3.scaleOrdinal, and d3.csv for data loading, with custom React components for axes, marks, and interactive filtering.

SSophia Cofone

87% match