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

dv.32 - snazzy scatter plot: w/ menus

This interactive scatter plot visualizes the Iris Dataset, displaying measurements of sepal and petal dimensions with points colored by species. Two dropdown menus allow users to select which attribute appears on the X and Y axes, re-scaling the plot accordingly. Built with React and D3 v6, it uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for species colors, and renders SVG circles with tooltips showing exact values.

94% match

snazzy scatter plot: w/ colors

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which numerical attributes to plot on the X and Y axes, while points are colored by species using a d3.scaleOrdinal with a semi-transparent color scheme. Built with React and D3 v6, the visualization renders as SVG elements, with axes generated via d3.scaleLinear and data loaded asynchronously from a CSV file using d3.csv.

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

snazzy scatter plot: w/ color legend

A scatter plot of the Iris dataset displays sepal and petal measurements, with points colored by species. The visualization uses interactive dropdown menus to select which measurement appears on each axis. Built with React and D3 v6, it renders SVG circles, axes, and a categorical color legend. Data is loaded from a CSV file, and the color scale uses distinct semi-transparent hues for each species.

Llzb1003

93% match

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.

dv.31 - scatter plot: w/ menus

This interactive scatter plot visualizes the Iris Dataset, showing measurements of sepal and petal dimensions for three flower species. Users can dynamically select which attribute to display on the x-axis and y-axis via dropdown menus that populate the D3.js linear scales. The React application renders circles in SVG format, with species color-coded using d3.scaleOrdinal with the schemeCategory10 palette. Hovering over any circle reveals a tooltip with the species name and exact coordinates, while axis labels update to reflect the current selections.

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between four measurements (sepal and petal length/width) through dropdown menus that control the x and y axes. Points are colored by species using a d3.scaleOrdinal with a corresponding legend showing the three Iris varieties. The visualization is built with React and D3 v6, rendering SVG circles and axes through custom components like AxisBottom, AxisLeft, and Marks, with data loaded via d3.csv from a remote gist.

CCodeDuckie99

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.