Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot for Iris dataset

✓ Published0🌍 Public
Sshreyasribearelly@gmail.com
Last edited Mar 18, 2024
Created on Mar 18, 2024

This visualization displays the distribution of colors from the ICE6 dataset, plotting each color’s red value on the x-axis against its green value on the y-axis. Each point is filled with the exact RGB color it represents, creating a direct visual correlation between position and hue. The code uses D3.js v6’s `csv` loader, `scaleLinear`, `axisBottom`, and `axisLeft` to parse the data and render axes, while SVG circles are positioned via the `cx` and `cy` attributes. The dataset is fetched from a remote CSV URL, and the axes are labeled "Red Value" and "Green Value" to clarify the mapping.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width on the x and y axes while coloring each point by species (setosa, versicolor, or virginica). The code loads CSV data via `d3.csv`, parses numeric fields, and uses `d3.scaleLinear` with `d3.extent` to compute domains. Circles are rendered as SVG elements with `d3.selectAll` and `data().join()`, while axes are added using `d3.axisLeft` and `d3.axisBottom`. Axis labels are drawn with SVG `text` elements.

Ssai snehith nadipally
88% match
Loading thumbnail…

Fork of Fork of ICE - 7 Reusable Scatter Plot

This example visualizes the classic Iris dataset as a scatter plot, with three species of flowers colored red, orange, or white, mapping petal width against sepal length. Built with d3.v6, it uses d3.scaleLinear, d3.extent, and d3.axisLeft/axisBottom to generate axes and SVG circles for data points. The reusable scatterPlot function dynamically updates the x-axis value to cycle through additional iris columns, demonstrating modular chart construction. Data is loaded via d3.csv from a GitHub gist.

RRadhakrishna246
88% match
Loading thumbnail…

ICE-6 Scatter Plot using Iris datset

This visualization displays the Iris dataset in a scatter plot, showing the relationship between petal length (x-axis) and petal width (y-axis) for three flower species, which are color-coded red, green, and blue. The D3 v6 code loads CSV data from a GitHub gist, uses `scaleLinear` and `extent` to map the numeric ranges, and renders SVG circles with `selectAll` and `join`. Axis labels are added via `axisLeft` and `axisBottom`, with custom text elements for axis titles.

SShishiraRudrabhatla
88% match
Loading thumbnail…

scatter plot ice-6

This scatter plot visualizes the Iris dataset, mapping each flower’s specification values along the y-axis against keyword values on the x-axis, with points colored by CSS level categories (turquoise, orange, violet). The D3 v5 code loads CSV data via `d3.csv`, applies linear scales with `d3.scaleLinear`, and renders SVG circles with axes generated by `d3.axisLeft` and `d3.axisBottom`. A custom legend distinguishes the three CSS level groups, while axis titles and tick styling are applied through D3 selections.

Sshreyasribearelly@gmail.com
87% match
Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa in blue, versicolor in yellow, and virginica in red). The visualization uses d3.csv to load the data and d3.scaleLinear to map the dimensions, while d3.axisLeft and d3.axisBottom render the axes. Each circle is drawn with an SVG circle element, and its radius is fixed, while the fill color is determined by a marker function. The plot is rendered using d3.v6 within an HTML page, with the chart sized to the browser window.

Vviswak12
87% match
Loading thumbnail…

Fork ofICE-6 Scatter Plot

This example visualizes the Iris dataset with a scatter plot that maps realSum on the x-axis and PetalWidthCm on the y-axis, coloring each point by species (blue, yellow, or red). It uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, rendering SVG circles with `rx` and `ry` attributes that redundantly encode SepalLengthCm and SepalWidthCm. Data loads from a remote Airbnb CSV GitHub gist, with axes labeled "Petal_Length" and "Sepal_Length", and the visualization fills the browser window.

Pprathyusha-reddy-arch
87% match
Loading thumbnail…

Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width for each sample while coloring points by species (blue, yellow, red). The visualization uses d3.csv to load data, d3.scaleLinear for axes, and D3’s selection joins to render SVG circles with petal dimensions. Axis labels are added via D3’s axisBottom and axisLeft, with text rotated for the y-axis. The chart also encodes sepal length and width as the rx and ry attributes of each circle.

Kkollirohit2000
87% match
Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping sepal length to the x-axis and sepal width to the y-axis, with points colored by species (green, violet, red). It loads data from a CSV via `d3.csv`, parses numeric fields, and renders SVG circles using D3 v6. The code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to create scales and axes, while a `switch` function assigns colors. Axis labels are added with rotated SVG text, and the visualization fills the full browser window.

VVineela Reddy
87% match