Color Legend

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width across three species. A color legend categorizes data points by species, and hovering over a legend item highlights the corresponding points while fading others to 20% opacity. The visualization is built with React and D3 v5, using `scaleOrdinal` for color mapping and programmatically generated SVG components for axes and marks.

Vvmonney

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, plotting petal length against sepal width for three species. A color legend allows users to hover over species names, dimming all other points to highlight the selected group. The visualization uses React with d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and d3.csv for data loading. SVG circles render the marks, while mouse events on the legend trigger state changes that adjust opacity via the fadeOpacity prop.

Wwindwaver

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

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. A React-based color legend on the right allows users to hover over species names, which highlights only the corresponding points while fading others to 20% opacity. The visualization uses d3.scaleLinear and d3.scaleOrdinal for positioning and coloring, with SVG rendering through React components that map data to circles and axis ticks. Data is loaded asynchronously via d3.csv from a GitHub gist.

AAgustina Farias

Interactive Colour Legend

This interactive scatter plot displays the Iris dataset, mapping petal length against sepal width with species indicated by color. The React-based visualization uses D3.js scales (scaleLinear, scaleOrdinal) and SVG rendering. Users can hover over the color legend to highlight points from a specific species while dimming others, achieved through React state management (useState) that toggles opacity values on the marks and legend items. The data loads asynchronously via D3's csv parser.

CChris Briggs

Interactive Color Legend

A scatter plot of the Iris dataset maps petal length against sepal width, with each point colored by species. Hovering over a species name in the color legend dims all other points to highlight the selected group. The visualization uses React hooks to manage hover state and re-render the SVG, with scales from d3.scaleLinear and d3.scaleOrdinal. Axes and legend ticks are built from reusable React components, and the data is loaded via d3.csv.

GGeniXiong

Color Legend

This interactive scatter plot displays the classic Iris flower dataset, allowing users to explore relationships between four measurements: sepal length, sepal width, petal length, and petal width. Two dropdown menus let viewers select which attributes appear on the x and y axes, while a color legend distinguishes the three iris species using an ordinal color scale. Built with React and D3 v5, the visualization uses svg circles with tooltips showing the x-axis value on hover, and employs `scaleLinear`, `scaleOrdinal`, and the `csv` data loader from d3.

EEugenio2192

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, plotting petal length against sepal width with points colored by species. A color legend on the right highlights one species at a time when hovered, fading the remaining points to 20% opacity for emphasis. Built with React and d3.v5, it uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading. SVG rendering is handled through React components, with hover interactions managed via onMouseEnter and onMouseOut events on legend ticks.

Wwenleicao