Iris Scatter Plot with selection

100%

Iris Scatter Plot with selection

✓ Published1🌍 Public

Last edited Sep 17, 2023

Created on Sep 17, 2023

This example displays the classic Iris dataset as a scatter plot, mapping sepal length and sepal width for three flower species. Each species is distinguished by color, with a legend box explaining the color mapping. The visualization is built with D3 v7, loading data via `d3.csv` and rendering as SVG. Key APIs include `scaleLinear`, `axisBottom`, `axisLeft`, and `select` for creating the plot, axes, and colored circles.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Iris flower dataset, comparing sepal length to sepal width across three species encoded by color. The visualization uses D3 v7’s scaleLinear, axisBottom, and axisLeft to construct the chart, with an ordinal color scale for species classification. Rendered as SVG, it includes a manually drawn legend and gridlines, reading data from a local CSV file through d3.csv. The chart demonstrates ES6 module imports and loading D3 via UNPKG.

YYi-Qing

93% match

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the iris dataset, showing sepal length against sepal width for three flower species, with each species colored distinctly via a custom color legend. The visualization uses D3 v5 to load CSV data and build an SVG scene, employing `scaleLinear` for the axes, `scaleOrdinal` for color encoding, and `axisBottom`/`axisLeft` to render gridlines. Semi-transparent circles reveal overlapping points, while a reusable `colorLegend` module generates a categorical legend with labeled circles and a background rectangle.

YYunLing

93% match

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Iris dataset, showing sepal length against sepal width for three species of iris flowers. The data comes from a CSV file containing measurements of 150 samples, with each species represented by a different color using D3’s scaleOrdinal and schemeSet1 palette. The visualization uses D3 v5 to load the data via csv(), create linear scales with scaleLinear, and render SVG circles with axisBottom and axisLeft for labeled axes. The chart includes gridlines and a title, with opacity applied to circles to reveal overlapping points.

Xxiplus

92% match

Loading thumbnail…

Iris scatterPlot

This example visualizes the classic Iris flower dataset, plotting sepal width against sepal length to reveal clusters by species. Each flower is a small circle, colored by species using `d3.scale.category10()`, with axis labels for the measurement units. The visualization loads tab-separated data from `iris.tsv`, uses `d3.scale.linear()` for x and y scales, and renders axes via `d3.svg.axis()`. A legend identifies the three species, while the SVG circles are positioned with `x()` and `y()` scales and filled based on the species value.

CChmits

92% match

Loading thumbnail…

Iris Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, allowing the selection of any two of the four measured attributes (sepal length, sepal width, petal length, petal width) for the x- and y-axes via dropdown menus. Each of the 150 iris flowers is represented as a colored circle, with red, blue, and green mapping to the three species. The D3.js code uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and constructs the SVG rendering by binding circles to the data, updating their positions based on the chosen columns. A legend to the right lists the species and their corresponding colors.

Hharker2011

92% match

Loading thumbnail…

Iris scatterPlot

This scatter plot visualizes the classic Iris dataset, plotting sepal width against sepal length for three species of iris flowers. Each flower is represented as a small circle, color-coded by species (setosa, versicolor, virginica) using a categorical color scale, with a legend in the upper right. The visualization uses D3 v3 to render an SVG graphic, employing `d3.scale.linear()` for the x and y axes, `d3.svg.axis()` for the axes, and `d3.scale.category10()` for coloring the dots. The data is loaded asynchronously from a tab-separated values file via `d3.tsv()`.

CChmits

92% match

Loading thumbnail…

Iris Scatter Plot

This scatter plot displays the classic Iris dataset, with each point representing a flower and colored by its species (setosa, versicolor, or virginica). The visualization uses D3 v5 to render an SVG, allowing users to dynamically select which measurements (sepal or petal length/width) appear on the x- and y-axes via dropdown menus. The code builds linear scales with `d3.scaleLinear`, generates axes with `d3.axisBottom` and `d3.axisLeft`, and adds a color legend using `d3.legendColor`. Circles are styled with an ordinal color scale, and grid lines are rendered through tick sizes.

Wwinniepooh520

92% match

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis, with each of the three species distinguished by color. The visualization uses D3 v7's scaleLinear for positioning, scaleOrdinal for categorical coloring, and the axisBottom and axisLeft components to create labeled axes. A separate color legend, built with custom SVG elements, maps each species to a specific color using a switch statement. Data is loaded from a local CSV file and parsed with d3.csvParse before being rendered as circular marks.

Ffloraho401

92% match