Scatter Plot with Color

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, displaying petal length on the x-axis and sepal width on the y-axis, with each data point colored by species using an ordinal color scale. It uses React with D3 v5’s `scaleLinear` and `scaleOrdinal` for scaling, and renders circles in SVG. Tooltips reveal exact petal length values, and the axes include formatted tick labels and clear axis titles.

Cching-tw

Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three iris species. Each point is colored by species using a d3.scaleOrdinal with a categorical color range. The visualization uses React components for rendering SVG elements, with d3.scaleLinear for the x and y axes. Axes are constructed manually from d3 scale ticks, and hover tooltips display the petal length value via SVG title elements.

CCurran Kelleher

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for individual flowers. Each point is colored by species using a d3.scaleOrdinal with a categorical color range, and the plot includes labeled axes with tick marks formatted using d3.format. The visualization is built with React, rendering SVG elements through reusable AxisBottom, AxisLeft, and Marks components that leverage d3.scaleLinear for positioning and d3.extent for domain calculation.

Jjwlam83

Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal width against petal length for individual flowers. Each circle is colored by species using a D3 ordinal color scale, with a tooltip revealing the petal length on hover. The visualization is built with React and rendered as an SVG, using D3’s scaleLinear for axes and scaleOrdinal for categorical colors. Axis components and data marks are structured as modular React components, and the dataset is loaded via D3’s csv parser.

Nnpelliccia

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for three iris species. Each circle is colored by species using a d3.scaleOrdinal color scale with distinct hues. The visualization is built with React and D3 v5, using d3.scaleLinear for axes and SVG for rendering. Hovering reveals tooltips via native SVG `<title>` elements.

Ssophburke

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each of the 150 flowers is represented as a colored circle, with color encoding species via d3.scaleOrdinal. The visualization is built with React and renders as SVG, using d3.scaleLinear for both axes and d3.extent to compute domains. Axes are custom components that generate tick marks and labels, while hover tooltips display petal length values using d3.format.

Aazharahmad0

Scatterplot with Color

This interactive scatterplot visualizes the Iris dataset, plotting petal length against sepal width. Each flower specimen appears as a circle colored by species using d3.scaleOrdinal with a categorical color palette. The visualization is built with React and D3 v7, using SVG rendering for precise control. Axes are generated with d3.scaleLinear, and circles include native SVG `<title>` elements providing tooltips on hover. Data is loaded asynchronously from a CSV file using d3.csv, with numeric parsing applied to measurement columns.

KK3zter

Scatter Plot with Color

This scatter plot visualizes the Iris dataset, plotting petal length against sepal width. Each point is colored by species using a D3 ordinal scale mapping to three distinct hues, with SVG circles rendered as marks. The React app uses D3’s scaleLinear for axes, scaleOrdinal for color, and format for tick labels, while tooltips reveal exact values on hover. The plot integrates custom axes and marks components within a single SVG canvas, demonstrating a clean, reusable React-D3 pattern.

NNikhil Reddy Manda