Skip to main content
SimilarExport ZIP
100%

Iris

✓ Published0🌍 Public
Ssri7harsha
Last edited Mar 27, 2022
Created on Mar 6, 2022

This interactive scatter plot visualizes the Iris dataset, mapping petal length and width as x and y coordinates while styling each circle with a color-coded species (orange, green, or brown). The code also encodes sepal dimensions by distorting each circle’s rx and ry attributes, creating ellipse-like shapes whose horizontal and vertical radii reflect sepal length and width. Built with D3 v6, it loads CSV data using `d3.csv`, applies `d3.scaleLinear` and `d3.extent` for scales, and renders axes via `d3.axisLeft` and `d3.axisBottom`. Circles are appended as SVG elements with custom fill, radius, and elliptical attributes.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width along the x- and y-axes while coloring each point by species. It also encodes sepal length and width into the horizontal and vertical radii of each circle, creating an elongated marker shape. The code loads data from a CSV using `d3.csv`, applies `d3.scaleLinear` and `d3.extent` for scales, and renders circles with SVG attributes `cx`, `cy`, `r`, `rx`, and `ry`. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, and the visualization fills the browser window.

Vvidhyanamini
95% match
Loading thumbnail…

Iris_scatter_plot

This visualization presents the classic Iris dataset as an interactive scatter plot, mapping petal length and width along the x- and y-axes. Each circle represents a flower, colored by species (green for setosa, purple for versicolor, red for virginica) using a custom marker function. Built with D3 v6, the code loads CSV data via `d3.csv`, scales positions with `scaleLinear`, and renders SVG circles using data joins. Axis labels display sepal length and petal width, while the plot dynamically sizes to the browser window. The example demonstrates fundamental D3 data binding and axis generation.

SSohilaBheemReddy
93% match
Loading thumbnail…

iris

This scatterplot visualizes the classic Iris dataset, plotting sepal length against sepal width for individual flowers. It uses D3.js v6 to load the CSV data and render SVG circles positioned by linear scales derived from the data’s extent. The chart includes labeled x- and y-axes for the two measurements, with axis generators `d3.axisBottom` and `d3.axisLeft`. The code defines chart dimensions and margins, appends the SVG container, and applies a uniform steelblue fill to all points, though it does not encode species information. The rendering approach is entirely SVG-based, with no interactive or animated elements.

TTarun Kumar Bosupally
93% match
Loading thumbnail…

Iris

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It uses d3.scaleLinear for both axes and d3.extent to compute their domains from the data. Circles are rendered in an SVG via d3.selectAll and the join pattern. The dataset is loaded as CSV with d3.csv from a remote gist URL, and the plot fills the entire browser window.

RRikibens
93% match
Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The plot also encodes sepal length and width as additional attributes on each circle, though these do not affect the visual radius. Built with D3 v6, the code uses `d3.csv` to load data, `d3.scaleLinear` and `d3.extent` for scaling, and `d3.axisLeft` and `d3.axisBottom` to render axes. The SVG circles are created via `selectAll('circle').data(marks).join('circle')`, with static labels for both axes.

Ppreethamkesa
93% match
Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and petal width for individual flowers while encoding species through color. It renders SVG circles using D3 v6, with scales from `d3.scaleLinear` and axes generated by `d3.axisLeft` and `d3.axisBottom`. The code loads CSV data via `d3.csv`, parses numeric fields, and positions marks based on the dataset’s sepal measurements. Axis labels indicate petal length on the x-axis and sepal length on the y-axis, offering a direct comparison of these floral traits.

AArv1228
92% match
Loading thumbnail…

iris

This interactive scatter plot visualizes the Iris flower dataset, letting users select which measurements (sepal length/width, petal length/width) map to the x- and y-axes via dropdown menus. It colors each point by species (setosa, versicolor, virginica) using a d3.scaleOrdinal with red, blue, and green, and includes a legend. Built with D3 v5, the visualization renders as SVG with animated transitions that grow circles from a central point over two seconds. It uses d3.csv to load data, d3.scaleLinear for axes, and d3.axisLeft/axisBottom with gridlines.

Iianjwo
92% match
Loading thumbnail…

Iris Dataset Scatter Plot

This D3.js scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal length on the y-axis. Each point represents an iris flower, colored by species (setosa in chartreuse, versicolor in orange, and virginica in blue). The code loads data from a CSV file via `d3.csv`, uses `scaleLinear` for axes, and renders circles as SVG elements. Axes are generated with `axisLeft` and `axisBottom`, while text labels for the axes are appended separately.

VVaishnavi6199
92% match