dv2020-ep35-viz36 - scatter plot w/ interactive color legend

dv2020-ep35-viz37 - scatter plot w/ interactive color legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flower specimens. A color legend categorizes data points by species, and hovering over a legend item highlights that species while fading all other points. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical coloring, and SVG-based rendering. The data is loaded remotely via D3’s `csv` function, while hover interactions manage opacity through a `hoveredValue` state.

98% match

dv2020-ep34-viz35 - scatter plot w/ color legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for three iris species. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color encoding by species, and d3.csv for data loading. React components render SVG circles with opacity, complemented by custom axis components and a color legend. The chart includes a legend title, axis labels, and tooltips showing measurements in centimeters.

96% match

dv2020-ep33-viz34 - scatter plot w/ color

A scatter plot visualizes the Iris Dataset, showing petal length against sepal width for individual flowers. Each circle is colored by species using a `scaleOrdinal` with a custom color range, and points are semi-transparent to reveal overlapping data. The visualization is built with React and D3 v5, using `scaleLinear` for both axes with padded domains and axis components for tick rendering. The iris data is loaded as CSV and parsed into numeric values for the plot.

94% match

dv.35 - interactive color legend

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting axes via React dropdowns or swapping them with a button. The visualization uses D3 scales for positioning and an ordinal color scale to encode species, rendered as SVG circles. An interactive color legend highlights points of a selected species by fading others, implemented with React state and mouse event handlers.

93% match

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

Dataviz 2020_Ep35 - 27. Interactive Color Legend

This scatter plot of the Iris dataset shows how petal and sepal dimensions vary across three species. An interactive color legend allows hovering over a species label to isolate its data points while dimming the others. Built with React and D3 v6, it uses `scaleOrdinal` for color mapping and SVG circles for marks. The dropdown menus let users select which quantitative attributes to plot on the x and y axes.

MMinwoo Pak

dv.34 - snazzy scatter plot: w/ color legend

This scatter plot visualizes the Iris flower dataset, displaying four numeric measurements (sepal and petal length/width) on the X and Y axes with interactive dropdown menus for selecting which attributes to compare. Species are encoded through a color ordinal scale with a legend in the right margin, and each point includes a hover tooltip showing the species and coordinate values. Built with React and D3 v6, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, rendering as SVG circles.

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