[VizStudy]Week7: Scatter plot with color legend

100%

[VizStudy]Week7: Scatter plot with color legend

✓ Published0🌍 Public

Last edited Oct 28, 2019

Created on Oct 28, 2019

This interactive scatter plot visualizes the Iris Dataset, plotting petal length against sepal width to reveal species clusters. The visualization uses d3.scaleLinear for axes and d3.scaleOrdinal with a three-color palette to distinguish Iris species. Built with React and rendered as SVG, the plot encodes species through color, with each circle representing a flower sample. Hovering over a point displays its precise value via an SVG title tooltip. The code imports functions like useData for CSV loading and uses d3's extent for domain calculation, with axis labels styled using the Poppins font.

AI-generated description

A scatter plot of The Iris Dataset.

Data Visualization study followin Curran.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

89% match

Loading thumbnail…

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

89% match

Loading thumbnail…

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.

Zzach b.

89% match

Loading thumbnail…

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

89% match

Loading thumbnail…

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

89% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, plotting petal length against sepal width with each point colored by species. The visualization uses D3 v6's scaleLinear and scaleOrdinal to map quantitative and categorical data, while React components render SVG axes, circles, and a color legend. The color legend displays distinct species categories, and hovering over points reveals their petal length values. Data is loaded via d3.csv from a remote URL, and the entire chart adapts to the browser window size.

BbeauMarko

89% match

Loading thumbnail…

Scatter Plot with Colour Legend

This interactive scatter plot visualizes the Iris dataset, plotting petal length against sepal width. Each point is colored by species, with a categorical color legend displaying the three species types (setosa, versicolor, and virginica) using distinct colors. Built with React and D3 v5, the visualization uses `scaleLinear` for the x and y axes, `scaleOrdinal` for the color encoding, and renders as an SVG with circles representing individual data points. The code includes hover tooltips showing the petal length value, and the data is loaded from a CSV file containing 150 iris flower measurements.

CChris Briggs

89% match

Loading thumbnail…

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

89% match