Skip to main content
SimilarExport ZIP
100%

scatter-plot-color-legend

✓ Published1🌍 Public
Oownerofthesoul0000@gmail.com
Last edited Feb 15, 2024
Created on Feb 10, 2024
Forked from scatter-plot

This scatter plot visualizes the Iris Dataset, showing the relationship between petal length and petal width. Circles represent individual flowers, colored by species using a categorical color scale (d3.scaleOrdinal with schemeCategory10). A legend highlights a species on hover by dimming other categories, with axis labels and tick marks rendered via d3.axisLeft and d3.axisBottom. The visualization loads data from a CSV file using d3.csvParse and updates reactively through a state management pattern with setState.

AI-generated description

Loading a CSV file, the Iris Dataset.

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
94% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for individual flowers. Each data point is a circle colored by species, with a color legend positioned to the right displaying the three species categories. The visualization is rendered as a React component using SVG, with axes and marks generated through custom code that leverages D3 v5 utilities like `scaleLinear`, `scaleOrdinal`, and `extent`. The axes are drawn with reusable `AxisBottom` and `AxisLeft` components, and hovering reveals a tooltip with the formatted x-value.

Jjwlam83
93% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. A color legend identifies the three species, with each point colored according to its species category. The visualization is built with React and D3 v5, using scaleLinear for the axes, scaleOrdinal for color encoding, and SVG circles for marks. The code includes custom AxisBottom, AxisLeft, and ColorLegend components, with hover tooltips provided by native SVG title elements.

Zzyniax
93% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length on the x-axis and sepal width on the y-axis. Each flower species is encoded by color, using a `d3.scaleOrdinal` color scale and a custom `ColorLegend` component to map species names to colors. The visualization is rendered as an SVG using React, with reusable components for axes and marks. Data is loaded asynchronously via the `d3.csv` function from a remote URL.

PPratik Raja
93% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the iris dataset, showing the relationship between petal length and petal width, with points colored by species. The D3.js scaleLinear function maps the dimensions to the SVG canvas, while scaleOrdinal assigns categorical colors. The React-based code renders SVG circles as marks, with a custom ColorLegend displaying the species categories. Data is loaded from a CSV file using the d3.csv function.

Nnpelliccia
93% match
Loading thumbnail…

Scatter Plot with Color Legend

This visualization displays the classic Iris dataset, plotting petal length against sepal width for three species of iris flowers. Each point is colored according to its species, with a color legend on the right side identifying the categories. The implementation uses React for component structure and state management, while D3 v7 utilities like `scaleLinear`, `scaleOrdinal`, and `csv` handle data loading, scaling, and coordinate mapping. The SVG rendering includes custom axis and legend components, with hover tooltips showing exact petal length values.

Jjbruzzo
93% 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
93% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the iris dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each point represents a flower specimen, colored by species using an ordinal color scale, with a legend showing the species categories. The visualization is built with React and D3 v5, using `scaleLinear` and `scaleOrdinal` for scales, `extent` for domain calculation, and custom SVG components for axes, marks, and the color legend. Data is loaded asynchronously from a remote CSV using D3’s `csv` method.

MMorgan Worrell
93% match