ScatterPlot + Regression Line applied on iris

100%

ScatterPlot + Regression Line applied on iris

✓ Published0🌍 Public

Last edited Jan 26, 2018

Created on Jan 25, 2018

This D3.js v4 visualization applies a linear regression model to the classic Iris dataset, plotting petal length against petal width. It uses distinct SVG symbols (triangle, wye, and star) to represent the three iris species, with color encoding from `d3.scaleOrdinal` and `d3.schemeCategory20`. The regression line is computed manually and drawn using `d3.line`, and the equation is displayed in the HTML. Interactive tooltips show data values on hover. The chart includes labeled axes and a legend.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Scatterplot with Regression Line

This example visualizes the classic Iris dataset, plotting sepal length against petal length for three flower species—setosa, versicolor, and virginica—as colored circles in a D3 scatterplot. Each species has its own linear regression line, computed from the data and drawn as a path, with the lines in blue, red, and green to match the points. The visualization uses D3’s `d3.svg.axis` for axes, `d3.scale.linear` for positioning, and `d3.svg.line` to generate the regression curves, all rendered as SVG elements. The data is embedded directly in the script via a `create_data()` function, and the axes are labeled with the raw measurement units from the dataset.

4456lumen

88% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while using circle color to distinguish the three flower species. It is rendered as an SVG using D3 version 6, with the `d3.csv` driver to load remote data and `scaleLinear`, `axisLeft`, and `axisBottom` to create the axes. Each circle’s radius is fixed, and the chart includes color-coded markers for species, making class separation immediately visible.

Pperamranji

87% match

Loading thumbnail…

Scatter Plot with Color

This interactive D3.js scatter plot, built with React and rendered as an SVG, visualizes the classic Iris dataset. It displays the relationship between petal length (x-axis) and sepal width (y-axis), with each of the three iris species distinguished by a unique color using `scaleOrdinal`. The visualization employs `scaleLinear` for both axes, and the `csv` function from D3 is used to load and parse the data. Interactive tooltips are provided via SVG `<title>` elements, showing the precise petal length of each point.

BBen Seebeck

87% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width on the x-axis against sepal length on the y-axis. It uses distinct symbols for each iris species, generated via D3's `scaleOrdinal` and `symbol` APIs to differentiate categories. The plot is rendered as an SVG, with axes created using `axisLeft` and `axisBottom`. The reusable chart component, inspired by Bostock’s "Towards Reusable Charts," accepts configurable data, value accessors, margins, and symbol size, demonstrating a modular approach to D3 visualization.

Ssugunagar

87% match

Loading thumbnail…

scatterplot in progress

This example visualizes the classic Iris dataset as a scatterplot, mapping sepal length and sepal width to the x- and y-axes while encoding petal length in the radius of each circle and species in color. Built with D3 v4 and rendered as SVG, the chart loads iris.csv and applies linear scales for all three variables, with the radius scale bounded between 2 and 15 pixels. The visualization uses a categorical color scheme (d3.schemeCategory20) to distinguish the three iris species, and axes are drawn on the bottom and left edges of the plotting area.

BBerengerCunillera

87% match

Loading thumbnail…

Scatter Plot, Slightly Stylized with Color & Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three species of iris flowers. Each data point is rendered as a colored circle in an SVG, with colors assigned by species using a d3.scaleOrdinal color scale. The chart includes custom React components for axes, marks, and a color legend, with d3.linear scales mapping data to pixel coordinates. A tooltip appears on hover, displaying the petal length value.

AAndre J Denais

87% match

Loading thumbnail…

Scatter Plot - Iris

This scatter plot visualizes the classic Iris dataset, showing the relationship between petal length and sepal length for three flower species. The D3 v5 code uses `scaleLinear` and `extent` to map data values to SVG coordinates, with React components handling axis rendering and circle marks. Each species receives a distinct color and opacity through CSS classes. The visualization includes labeled axes with formatted tick marks and a native SVG `<title>` tooltip that reveals the species name on hover.

FFlorian Kotthoff

87% match

Loading thumbnail…

Scatter Plot Using Iris Data

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each point colored by species (green, purple, or red). It uses d3.csv to load the data, d3.scaleLinear for axes, and d3.axisLeft and d3.axisBottom to render the scales. Circles are drawn as SVG elements via a data join, with labels for the axes in red and purple. The plot is rendered in vanilla HTML.

MMeghanaArepalli

87% match