Amulya kannam

100%

✓ Published0🌍 Public

Last edited Jul 2, 2022

Created on Jul 2, 2022

A scatter plot of the Iris dataset visualizes petal length against sepal width. The D3 scaleLinear and scaleOrdinal APIs map data to positions and colors, with each species assigned a distinct hue via the color scale. The React application uses SVG circles, rendered with a map over the data, to display each sample. Interactive tooltips show the petal length value on hover.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

84% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, displaying petal length against sepal length for individual flowers. The visualization uses React with D3 scales (`scaleLinear`, `extent`) to map data values to SVG coordinates, with custom axis components generating tick marks and labels. The D3 CSV loader fetches the data from a remote gist, while circles with 0.6 opacity represent each observation. The chart includes labeled axes and applies `nice()` to domain padding for cleaner tick intervals.

AAnkit5ingh

84% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, showing the relationship between petal length and sepal width for individual iris flowers. The React-based visualization uses D3 v5 scales and axes to map the quantitative values to SVG coordinates. Data loads asynchronously via `d3.csv`, with each flower represented as a circular mark. The chart includes clearly labeled axes with rotated y-axis text, formatted tick values using `d3.format`, and a custom tooltip system that displays the petal length when hovering over a point. Styling is applied through CSS classes for ticks, labels, and marks.

Ggujjapooja7@gmail.com

84% match

Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, mapping petal length and sepal width for individual samples. Circles are colored by species, with a legend-free color scheme distinguishing Adelie (grey), Gentoo (green), and other species (blue). The visualization uses D3 v5 with a React-friendly SVG rendering approach, employing `d3.csv` for data loading, `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for chart scaffolding. It includes a titled header and responsive sizing based on window dimensions.

LLakshmiManjushaReddyYarreddu

84% match

Loading thumbnail…

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

84% match

Loading thumbnail…

Scatter plot

This scatter plot visualizes the Iris flower dataset, mapping petal length along the x-axis and sepal width along the y-axis. Each circle represents a flower sample, with a tooltip showing its petal length. The visualization uses React to render SVG elements, with D3 v5 providing the `scaleLinear` functions for axes and the `csv` parser for data loading. The data comes from a CSV file of the Iris dataset.

GGokulkrishnan1996

84% match

Loading thumbnail…

Scatter Plot

This interactive scatter plot displays the Iris dataset, plotting petal length against sepal width for individual flowers. The visualization is built with React and rendered as SVG elements, using D3 v7 scales (d3.scaleLinear) and axes. Each data point is a circle with a radius of 10, and hovering reveals the petal length as a native tooltip. The code uses d3.extent to set domains, d3.csv for data loading, and d3.format with a custom tick formatter that replaces 'G' with 'B' for axis labels.

Aangelathacker123

83% match

Loading thumbnail…

Scatter plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each circle represents a single flower sample, with a native tooltip revealing the precise x-value on hover. Built with React and rendered as SVG using d3.scaleLinear for both axes, the visualization employs custom AxisBottom and AxisLeft components for tick marks and labels. The d3.csv loader fetches the data, while the marks are drawn as circle elements with dark red fill, styled with the Bebas Neue font.

FFrederick O'Brien

83% match