Skip to main content
SimilarExport ZIP
100%

Scatterplot with Legend Interaction

✓ Published1🌍 Public
SSubhendu Karmakar
Last edited Feb 13, 2024
Created on Jan 29, 2024

This scatterplot maps the Iris dataset by sepal length on the x-axis and petal length on the y-axis. Users can click a species in the legend to highlight only those data points while dimming the others; clicking again clears the filter. The visualization uses D3.js v7 within a React-like state management pattern, employing `csvParse` for data loading and `scaleLinear` for axes. The legend is built with categorical color scaling via `scaleOrdinal` and `schemeCategory10`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Interactive Color Legend

A scatter plot of the Iris Dataset shows petal length against sepal width, with each point colored by species. The visualization uses React with D3 scales to map data to SVG coordinates. An interactive color legend allows hovering over species labels to highlight only the corresponding points, dimming all others. The code implements this interaction through React state management, re-rendering marks with adjusted opacity when the hovered species changes.

FFulvio Vigilante
93% match
Loading thumbnail…

Scatterplot with Color Legend

This interactive scatterplot displays the Iris Dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that control the x and y axes. Each point represents an iris flower, colored by species with a corresponding legend. The visualization uses React components and D3 v7 scales (d3.scaleLinear, d3.scaleOrdinal) to render SVG marks and axes from CSV data.

JJun Suzuki
93% match
Loading thumbnail…

Scatter Plot with Color Legend

This visualization displays the classic Iris dataset, plotting petal length against sepal width for three species of iris flowers. Each point is colored according to its species, with a color legend on the right side identifying the categories. The implementation uses React for component structure and state management, while D3 v7 utilities like `scaleLinear`, `scaleOrdinal`, and `csv` handle data loading, scaling, and coordinate mapping. The SVG rendering includes custom axis and legend components, with hover tooltips showing exact petal length values.

Jjbruzzo
93% match
Loading thumbnail…

Scatter Plot, Color & Interactive Legend

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width, with points colored by species. An interactive legend allows users to hover over species names, highlighting only the corresponding data points and fading the others. The visualization is built with React and rendered as SVG, using d3.scaleLinear for axes and d3.scaleOrdinal for color mapping. Point tooltips display the precise petal length value using d3.format.

AAndre J Denais
92% 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
92% match
Loading thumbnail…

Scatter plot with Colors Legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements along the x- and y-axes while using color to distinguish species. Users can select which attributes to plot from dropdown menus. The visualization uses React with D3’s `scaleLinear` for axes, `scaleOrdinal` for color encoding, and renders SVG circles with tooltips. A color legend maps species to distinct colors, with axis labels and tick marks generated by custom React components.

Kkragovic
92% match
Loading thumbnail…

Scatter Plot with Interactive Color Legend

This scatter plot visualizes the classic Iris dataset, showing petal length against sepal width with points colored by species. A color legend on the right highlights all three Iris species, and hovering over a legend entry fades non-matching points while emphasizing the selected species. The visualization uses React and D3 v5, with D3’s `scaleLinear` for axes, `scaleOrdinal` for categorical coloring, and SVG rendering. It demonstrates interactive filtering through React state management and mouse event handlers.

Aazharahmad0
92% match
Loading thumbnail…

scatter with legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three species. A legend uses color to distinguish species, while dropdown menus let viewers change which attributes appear on the x- and y-axes. Built with React, the visualization uses D3 scales (d3.scaleLinear, d3.scaleOrdinal) to map data to SVG coordinates and colors. The interface includes axis components, a color legend rendered as circles, and tooltips showing formatted values, with data loaded from a CSV file.

Mmarianamartins87
92% match