Fork of Interactive Scatter Plot with Color Legend & Changeable Axes using D3 and React

100%

Fork of Interactive Scatter Plot with Color Legend & Changeable Axes using D3 and React

✓ Published0🌍 Public

Last edited Sep 8, 2024

Created on Sep 8, 2024

Forked from Interactive Scatter Plot with Color Legend & Changeable Axes using D3 and React

This interactive scatter plot visualizes the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements through changeable X and Y axes. A color legend distinguishes the three flower species, and hovering over a species name highlights those data points while dimming others. Built with React, the visualization uses d3.scaleLinear and d3.scaleOrdinal for positioning and color mapping, with custom React components rendering SVG axes, marks, and legends. Data loads via d3.csv, and the ReactDropdown component manages axis selection.

AI-generated description

A stylized scatter plot of the famous iris data set, using React to create menus and interactivity.

A more saturated color represented overlapping data points.

Selecting different options from the X and Y dropdown menus will change the axes on which the data is plotted, with labels to match.

Hovering over the species color legend will single out that species in the display.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Scatter Plot with Color Legend & Changeable Axes using D3 and React

This interactive scatter plot visualizes the classic iris dataset, allowing users to explore relationships between sepal and petal measurements. The chart uses React and D3 v5 with SVG rendering, featuring dropdown menus to change the X and Y axes, which updates the plotted points and axis labels. A color legend maps the three iris species, and hovering over a species in the legend highlights its data points while dimming others. The code uses `scaleLinear` for axes, `scaleOrdinal` for color encoding, and React's `useState` to manage interactive state.

PPhronesis

94% match

Loading thumbnail…

Fork of Scatterplot with Color Legend

This interactive scatterplot visualizes the Iris flower dataset, allowing users to compare different measurements (sepal and petal length and width) by selecting from dropdown menus. React manages the UI state and rendering while D3 utilities (scaleLinear, scaleOrdinal, extent, csv) handle data loading, scales, and axes. Points are colored by species using an ordinal color scale, with native SVG tooltips providing values on hover. The visualization demonstrates a hybrid approach where D3 calculates scales and CSV parsing, while React components render the SVG elements.

Nnexus1058

93% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width for three iris species. Users can hover over the color legend to highlight a selected species while fading non-matching points, using React state management. The visualization uses d3.scaleLinear and d3.scaleOrdinal for positioning and color encoding, with SVG circles rendered via React components. Data is loaded asynchronously from a CSV using d3.csv, and axes are constructed with custom React components that generate SVG tick marks and labels.

MMohaimin-1935

93% match

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, encoding petal length on the x-axis, sepal width on the y-axis, and species as color. It uses React and d3.scaleLinear for axes, d3.scaleOrdinal for the categorical color scale, and SVG circles for marks. Hovering over a species in the color legend highlights the corresponding points while dimming others, implemented through React state and opacity transitions. The chart is rendered with SVG and includes axis labels, a color legend, and tooltips.

Ccshm407

93% match

Loading thumbnail…

Fork of Scatter plot with color legend

This fork of a scatter plot visualizes the classic Iris dataset, allowing interactive exploration of relationships between sepal and petal measurements. The React-based graphic uses D3 scale functions (`scaleLinear`, `scaleOrdinal`) to map data attributes to x/y positions and categorical species to a color legend. Two dropdown menus let users select which numerical attributes to compare, while the SVG rendering updates immediately. The color legend encodes the three Iris species using distinct hues. The code demonstrates a modular approach with separate components for axes, marks, and the legend, using D3 utilities for data loading, scaling, and tick formatting.

LLewis Ward

93% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width. A React component renders SVG circles colored by species using d3.scaleOrdinal, while d3.scaleLinear handles x and y positioning. Hovering over the color legend highlights points of that species and fades all others to 20% opacity. Axes are built with custom React tick components, and data loads asynchronously via d3.csv.

YYedrup

93% match

Loading thumbnail…

Fork of Interactive Color Legend

YYedrup

93% match

Loading thumbnail…

Fork of dv.35 - interactive color legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements with points colored by species. Users can select which attributes appear on the x and y axes via React Dropdown menus or swap them with the AxisSwap button. Hovering over the color legend highlights circles of that species by reducing the opacity of others. The visualization uses React with D3 v6 scales (scaleLinear, scaleOrdinal), SVG rendering, and custom axis and legend components.

Eeourm20

92% match