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

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

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width with points colored by species. An interactive color legend on the right allows users to hover over a species name, which highlights points of that species by fading all other circles to partial opacity. The visualization uses React with D3 v5 scales and SVG rendering, employing `scaleLinear`, `scaleOrdinal`, and custom React components for axes, marks, and the legend. Data is loaded asynchronously via D3's `csv` method from a GitHub gist.

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.

95% 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

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

Dataviz 2020_Ep34 - 26. Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between four physical measurements (sepal and petal dimensions) by selecting which variable appears on each axis via dropdown menus. D3.scaleLinear maps the numeric attributes to screen coordinates, while d3.scaleOrdinal assigns categorical colors to the three Iris species, displayed in a custom color legend rendered as SVG circles. The visualization uses React hooks to manage state, D3’s csv parser to load the data, and SVG marks with tooltips for each point.

MMinwoo Pak

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

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

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.