Scatter Plot With Color Legend

Scatter Plot with Colors

This scatter plot visualizes the Iris dataset, plotting sepal length against sepal width, with each point colored by species. A color legend allows users to hover over a species to highlight corresponding data points and fade the others, aiding comparison across groups. Built with React and rendered as an SVG, the visualization uses D3 v7 APIs like `d3.csv` for data loading, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` for the categorical color mapping.

GGabriel

Scatter Plot With Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width with points colored by species. Built with React and D3 v5, the visualization uses `scaleLinear` to map data coordinates to SVG positions and `scaleOrdinal` to assign species colors. The SVG rendering includes custom axes, a color legend, and circle marks that display tooltips with formatted values on hover.

KKolezhannochka

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing sepal length against sepal width for three iris species. Each point is color-coded by species using a d3.scaleOrdinal, with a custom legend displaying the color mapping. The visualization uses React with D3 scales and axes (d3.scaleLinear, d3.axisBottom, d3.axisLeft) rendered as SVG elements. Hovering reveals a tooltip via SVG `<title>` elements, and the data is loaded asynchronously with d3.csv.

GGayan Priyadarshana

Scatter Plot with Color with Color Legend

This interactive scatter plot visualizes the Iris dataset, showing sepal width against petal length for different Iris species. Data points are rendered as circles with colors mapped to each species, accompanied by a legend that identifies the color-to-species correspondence. Built with React and D3.v5 utilities including `scaleLinear`, `scaleOrdinal`, and `extent`, the visualization uses SVG for rendering. The color legend communicates the species mapping, while tooltips display the petal length value for each point.

Yyejichun@naver.com

Scatterplot with Color Legend

This scatterplot visualizes the Iris flower dataset, plotting sepal length against sepal width with points colored by species. A color legend maps species names to distinct hues, while axis labels and tick marks provide scale context. Built with React and D3 v7, the example uses `scaleLinear` for positioning, `scaleOrdinal` for categorical colors, and custom reusable components like `AxisBottom`, `AxisLeft`, and `ColorLegend` to render SVG elements. Data is loaded asynchronously via `csv` from a remote URL.

Aafcchilders

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing the relationship between petal length and sepal width for different iris species. Each data point is rendered as a circle using SVG, with color encoding species membership through a categorical color scale. The visualization includes axes, axis labels, and an interactive color legend that logs species names on hover. Built with React and D3 v5, it uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading.

Wwenleicao

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

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, mapping petal length and sepal width to the x and y axes. Each point is colored by species using a categorical scale with a legend positioned to the right. The visualization is built with React and rendered as SVG, using D3 scales such as `scaleLinear` and `scaleOrdinal` for positioning and coloring. Axes are drawn with custom React components, and a `title` element provides native tooltips for each circle.

WWolfgang