Skip to main content
SimilarExport ZIP
100%

Interactive Stylized Scatter Plot with colors

✓ Published0🌍 Public
JJulien Tremblay
Last edited Oct 25, 2024
Created on Oct 25, 2024

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width. Points are colored by species, and hovering over a color legend entry filters the displayed points to that species. The visualization uses React with D3 v5 for scales and axes, rendering SVGs with custom components like `AxisBottom`, `AxisLeft`, and `ColorLegend`. Data is loaded via D3’s `csv` function, and ordinal color scaling assigns distinct hues to each species.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Scatter Plot With Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width and coloring points by species. A color legend allows users to hover over species labels to highlight only the corresponding data points while dimming others. The visualization is built with React and D3 v5, using d3.scaleLinear for positioning, d3.scaleOrdinal for categorical colors, and custom SVG components for axes and marks. Data loads asynchronously via d3.csv from a GitHub gist.

KKolezhannochka
96% match
Loading thumbnail…

Interactive Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, plotting petal length against sepal width with each species represented by a distinct color. The visualization uses React and d3-scale functions (scaleLinear, scaleOrdinal) to map data to positions and colors. Hovering over the color legend highlights only the points belonging to that species while fading all others, with the legend item and matching data points responding to mouse events. The chart renders as SVG with custom AxisBottom and AxisLeft components.

KKtuzinowski
95% match
Loading thumbnail…

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width along the axes and encoding species with color. Hovering over a legend item highlights the corresponding species’ points while dimming others. Built with React and D3 v5, it uses `scaleOrdinal` for color, `scaleLinear` for positions, and custom React components for axes, marks, and the interactive legend. Data is loaded as CSV and rendered as SVG circles with tooltips.

NNelson M
95% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, showing petal length against sepal width with points colored by species. A color legend on the right highlights points of a selected species by dimming all others to 20% opacity when the mouse hovers over a legend entry. The visualization is built with React and d3.v5, using d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv to load the data. SVG rendering handles both the marks and legend interactions.

AAjayyy
95% match
Loading thumbnail…

Stylized Scatter Plot with colors

This visualization presents the classic Iris dataset as an interactive scatter plot, mapping petal length against sepal width for individual flower specimens. The React components construct an SVG chart using D3 scales, while a categorical color scale distinguishes the three iris species, accompanied by a color legend. The implementation leverages d3.csv for data loading, scaleLinear and scaleOrdinal for positioning and coloring, and custom React components for axes, marks, and legends.

JJulien Tremblay
95% match
Loading thumbnail…

Stylized Scatter Plot with Colors

This interactive scatter plot visualizes the Iris Dataset, plotting petal length against sepal width with points colored by species using D3 scaleOrdinal. Built with React and rendered as SVG, it uses d3.csv to load data and d3.scaleLinear for axes. Circles include tooltips via SVG title elements, while axis labels and tick formatting use D3's format function.

YYenTingWu
95% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot of the Iris Dataset visualizes petal length against sepal width, with points colored by species. Hovering over a color legend entry highlights that species’s points while fading others, implemented through React state and mouse events. The visualization uses d3.scaleLinear and d3.scaleOrdinal for scales, renders SVG circles via React components, and loads CSV data with d3.csv.

JJepyagg
95% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, displaying petal length against sepal width with points colored by species. A color legend on the right allows hovering over a species name to highlight only its corresponding data points while fading the others to 20% opacity. The visualization is built using React with D3 scales (`d3.scaleLinear`, `d3.scaleOrdinal`) and SVG rendering. Data is fetched via `d3.csv`. The code includes custom components for axes, color legend, and marks, with hover state managed through React hooks.

JJoe Hutchins
94% match