Skip to main content
SimilarExport ZIP
100%

ICE6.1

✓ Published8🌍 Public
BBryanA999
Last edited Mar 4, 2022
Created on Mar 3, 2022
Forked from HTML Starter

This visualization displays the classic Iris dataset as an SVG scatterplot, comparing sepal length against petal length. It uses the `d3.scaleLinear` scale and `d3.extent` to map data to screen coordinates, with colored circles differentiating the three iris species (setosa, versicolor, and virginica). The code loads data via `d3.csv`, renders axes with `d3.axisLeft` and `d3.axisBottom`, and labels the chart with SVG text elements. The visualization adapts to the viewport size and is built with D3 v6 within a React-compatible HTML page.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length and width on the x- and y-axes while encoding sepal dimensions through elliptical markers whose rx and ry attributes correspond to sepal length and width. Species are represented by distinct colors: purple for setosa, brown for versicolor, and pink for virginica. The code uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` loader within a React-free SVG rendering approach. Axes labels indicate measurements, and the plot fills the browser window with a 24-pixel tick font.

SSaahithi49
94% match
Loading thumbnail…

ICE-6

This visualization displays the Iris dataset, plotting petal dimensions along the axes while mapping sepal measurements to circle properties. The SVG uses `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom` for scales and ticks. Circles are colored by species (setosa, versicolor, virginica) via a switch function, with `rx` and `ry` attributes derived from sepal length and width. The data loads from a CSV using D3’s `csv` method with type coercion, and the chart resizes to the viewport.

AAshrith Kudidhi
93% match
Loading thumbnail…

ICE-6

This visualization presents the Iris dataset as a scatter plot, mapping petal length and width on the x and y axes. Each data point is colored by species, using yellow, blue, and red to distinguish setosa, versicolor, and virginica. The code loads CSV data via `d3.csv` from a GitHub gist, uses `d3.scaleLinear` and `d3.extent` for scaling, and renders circles with SVG attributes like `cx` and `cy`. Axis labels are drawn with `d3.axisLeft` and `d3.axisBottom`, while the title "SCIENTIFIC DATA VISUALISATION" appears at the top.

SSaahithi49
92% match
Loading thumbnail…

ICE 6

This scatter plot visualizes the Iris dataset, mapping petal length and petal width on the x- and y-axes, with each point colored by species. It uses D3 v6 to load CSV data, apply linear scales, and render SVG circles with axes and labels. The code demonstrates `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and the `join` method for binding data to SVG elements. The chart includes custom tick styling and a simplified color scheme for the three iris species.

AAmar09nath
92% match
Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width while coloring points by species (setosa, versicolor, virginica). The code loads CSV data via `d3.csv`, scales positions with `d3.scaleLinear`, and renders circles as SVG elements using `d3.selectAll` and `join`. Axes are created with `d3.axisLeft` and `d3.axisBottom`, with custom red axis labels. The visualization uses a React framework shell but relies on vanilla D3 v6 for rendering directly into the DOM.

MMgk1255
92% match
Loading thumbnail…

ICE-6 Iris Scatter Plot

This example visualizes the classic Iris dataset, plotting petal length against sepal length as a scatter plot of circles. The code uses D3 v7 to load the CSV data, parse numeric fields, and create linear scales for the axes. SVG is used for rendering, with axes and labels generated via `axisLeft` and `axisBottom`. The viewport dimensions determine the chart size, and margin-based spacing positions the axis labels and plot area, creating a clean, full-screen scatter plot.

DDan Waters
91% match
Loading thumbnail…

ICE6

This visualization uses a D3 v6 scatter plot to display the Iris Dataset, mapping petal length and width to the x and y axes, while coloring each point by species. Sepal length and width are assigned to non-standard `rx` and `ry` attributes, though the constant radius overrides their visual effect. The SVG is rendered full-screen with axes generated using `axisLeft` and `axisBottom`, and data is loaded via `d3.csv` with type coercion in a parse function.

Aaashrithd4
91% match
Loading thumbnail…

ICE 6

This example displays the Iris dataset as a scatter plot of petal length against petal width, with each data point colored by species. It uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` to load the data, scale axes, and render SVG circles. Although the code defines `rx` and `ry` attributes from sepal measurements, the circles are drawn with a fixed radius, so the plot shows a standard clustered distribution.

AAmar09nath
91% match