Skip to main content
SimilarExport ZIP
100%

scatter plot

✓ Published0🌍 Public
Nnagarjuna1968
Last edited Mar 28, 2022
Created on Mar 28, 2022

This scatter plot visualizes the Iris dataset, displaying petal width against sepal length for three species, each color-coded via `d3.scaleOrdinal`. Built with D3 v6 and SVG, the chart uses a reusable `scatterPlot` function that scales data with `d3.scaleLinear` and renders axes via `d3.axisLeft` and `d3.axisBottom`. The visualization is responsive, filling the window, and includes custom legend and axis labels.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, comparing petal length against sepal length for individual flowers. Built with D3 v6, the SVG rendering uses `scaleLinear` to map data extents to pixel coordinates, with `axisLeft` and `axisBottom` generating labeled axes. Circles are joined to the data via `selectAll().data().join()`, while margins and full-window dimensions position the chart. The code asynchronously loads the comma-separated values using `csv` and parses numeric fields before plotting.

Vvidhyanamini
92% 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
92% 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
92% match
Loading thumbnail…

D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length as the primary axes while encoding species by color. The visualization cycles through different column pairings every two seconds using `setInterval`, animating the axes and circle positions. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, alongside SVG circles and custom labels. The chart is rendered on a full-window SVG, with data loaded via `d3.csv` from a remote GitHub gist.

RRaja Srinivas Nelluri
92% match
Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the Iris Dataset, plotting petal length against sepal length for individual data points. The SVG visualization uses `d3.csv` to load data, `d3.scaleLinear` for axis scaling, and `d3.axisLeft` and `d3.axisBottom` to render axes. Circles are drawn using a `join` operation to bind data attributes to SVG circle elements. The chart is responsive, filling the browser window with margins applied around the plot area.

NNaimisha-M
92% 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
92% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, showing petal width against sepal length, with each species color-coded (setosa in gold, versicolor in teal, and virginica in red). The visualization cycles through four attribute combinations every two seconds, updating both the axes and circle positions. Built with D3 v6, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisLeft`, and `d3.axisBottom` within a reusable `scatterPlot` function, rendering as SVG circles with HTML labels.

Pprajoth0405
91% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, showing petal length and width, with points colored by species. The visualization uses D3 v6 to load CSV data from a GitHub gist, scale the axes linearly, and render circles as SVG marks. The plot includes axis labels for petal and sepal measurements, with a supplementary legend indicating the three Iris species.

Cchsaisriharsha@gmail.com
91% match