Color Legend Scatter Plot

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

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 Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length on the x-axis and sepal width on the y-axis, with each of the three iris species represented by a distinct color. The visualization uses D3.js scaling functions (`d3.scaleLinear`, `d3.scaleOrdinal`) within a React framework, rendering circles as SVG marks. A color legend provides species identification, with axes and labels formatted and styled through custom React components (`AxisBottom`, `AxisLeft`, `Marks`, `ColorLegend`).

Ssophburke

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width with a color legend for species. The d3.v7 scales (scaleLinear, scaleOrdinal) position circles within an SVG rendered via React. Axis components handle tick generation, while d3.csv loads and parses the data. A color scale assigns distinct hues to the three iris species, with a legend generated from the color domain.

BBen Seebeck

Color Legends

This scatterplot displays the Iris dataset, plotting petal length against sepal width. Each flower is represented by a circle colored according to species, with a categorical color legend indicating the mapping. The visualization uses d3.scaleLinear and d3.scaleOrdinal for positioning and coloring, rendered as SVG via React. Axes, tick formatting, and interactive tooltips are implemented using reusable React components that call d3 APIs like extent, format, and scale functions.

Llefat92

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

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal length and sepal width on the x and y axes, with each point colored by species. A color legend identifies the three species categories. Built with React and D3 v5, the visualization uses d3.scaleLinear for coordinate mapping and d3.scaleOrdinal for species colors, rendering SVG circles via React components. Data is loaded asynchronously using d3.csv from a GitHub gist, with axes and labels generated through custom React components.

DDanier

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