Skip to main content
SimilarExport ZIP
100%

All Info In One - Studying of D3 Scatter Plot colors by species

✓ Published0🌍 Public
TToly
Last edited Dec 31, 2022
Created on Dec 30, 2022

This visualization uses the Iris Dataset to show how sepal and petal measurements relate across three iris species. It displays petal length on the x-axis, petal width on the y-axis, and sepal length as the size of each circle. Species are encoded by color, with setosa in blue, versicolor in red, and virginica in black. Built with D3 v6, the example uses `d3.csv`, `d3.scaleLinear`, `d3.scaleSqrt`, and SVG circles with tooltips to reveal exact values on hover. Axes are rendered using `d3.axisLeft` and `d3.axisBottom`.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of All Info In One - Studying of D3 Scatter Plot

This visualization displays the Iris dataset as an interactive scatter plot, encoding petal length, petal width, and sepal length along the x-axis, y-axis, and circle radius respectively. Species are distinguished by color (blue, red, and black). Built with D3 v6, it loads CSV data using the `d3.csv` method with custom row parsing, then maps values through `d3.scaleLinear` and `d3.scaleSqrt` functions. SVG circles are rendered with axes generated via `d3.axisLeft` and `d3.axisBottom`, using the data-join pattern.

CCurran Kelleher
91% match
Loading thumbnail…

Iris Dataset Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal length for three flower species. It uses D3.js v6 (d3.csv, d3.scaleLinear, d3.axisLeft, d3.axisBottom) to load and parse the data, scale the points, and render the SVG circles. Each species is assigned a distinct color: skyblue for setosa, red for versicolor, and green for virginica. The visualization includes labeled axes, margins, and a radius of 6 for all data points.

SSnapika
90% match
Loading thumbnail…

All Info In One - Studying of D3 Scatter Plot

This example uses D3 v6 to render the Iris Dataset as an interactive-free scatter plot, encoding petal length and width on the x- and y-axes via `d3.scaleLinear` and `d3.extent`. Each data point is drawn as an SVG ellipse, where the horizontal and vertical radii represent sepal length and width, creating a compact multi-dimensional visualization. Points are colored by species using a simple switch statement, and hover tooltips display all four measurements via appended `title` elements. The plot includes axes generated with `d3.axisLeft` and `d3.axisBottom`.

FFelipe Maion
90% 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
89% match
Loading thumbnail…

Scatter Plot for Iris Data

This scatter plot visualizes the Iris dataset, showing the relationship between sepal and petal measurements. Points are colored by species, with setosa in green, versicolor in purple, and virginica in red. The visualization uses D3's scaleLinear for axes, extent for domain calculation, and axisLeft/axisBottom for chart rendering. The code loads CSV data, parses numeric fields, and renders circles with SVG. The plot demonstrates how D3's selection joins and margin calculations work to create a functional scatter plot.

PPavaniMangugari
89% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal length on the y-axis, with points colored by species (setosa, versicolor, and virginica). Built with D3 v6 and rendered as SVG, it uses `d3.csv` to load data, `scaleLinear` and `extent` to set scales, and `axisLeft` and `axisBottom` for axes. Circle marks are appended via `data().join()`, with a custom color mapping function for each species. The plot fills the browser window and includes labeled axes.

KK V VINITHA
89% match
Loading thumbnail…

scatter plot

This scatter plot visualizes the Iris Dataset, displaying sepal length on the x-axis and sepal width on the y-axis, with each point colored by species (Iris-setosa, Iris-versicolor, or Iris-virginica). The visualization uses D3 v6 to load CSV data, apply linear scales via `d3.scaleLinear`, and render circles in an SVG. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, and additional petal length and width values determine each circle’s radius properties. The plot fills the browser window, with styled tick labels and axis text.

DDineshK2602
88% match
Loading thumbnail…

Scatter Plot

This animated scatter plot visualizes the Iris dataset, showing the relationship between sepal and petal measurements across three species, with each species distinguished by a color-coded legend. The visualization cycles through different column pairings every two seconds using `setInterval`, updating the x-axis scale and circle positions. Built with D3 v6, the code uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render the SVG circles and axes. Data is loaded from a CSV file using `d3.csv`, with species colors mapped via `d3.scaleOrdinal` and a custom `scatterPlot` function managing the reusable chart logic.

Sskambhore04
88% match