Skip to main content
SimilarExport ZIP
100%

Ice 6 part 2

✓ Published0🌍 Public
JJerlineJJ
Last edited Mar 7, 2022
Created on Mar 7, 2022
Forked from HTML Starter

This example visualizes the Iris dataset, mapping petal length and width to x/y positions while coloring each circle by species. The circles also encode sepal length and width through rx and ry attributes, creating an elliptical distortion. The visualization renders as an SVG using d3.scaleLinear, d3.extent, d3.axisLeft, d3.axisBottom, and d3.csv to load and parse the data. Axis labels are added manually via SVG text elements, and the color mapping uses a simple switch statement for the three species.

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-2

This visualization displays the Iris dataset, mapping petal length and width to the x- and y-axes while encoding sepal dimensions through each circle’s rx and ry radii, which are drawn as ellipses rather than standard circles. Species are color-coded (green, purple, orange) via a switch statement, with D3 axes labeled “Sepal length” and “Petal Length” shown at 24px tick font. The code loads CSV data using d3.csv, applies scaleLinear for both axes, and renders SVG circles with d3.selectAll and join. Axis labels are added as SVG text elements with rotation for the y-axis.

NNikhilMakkena
94% match
Loading thumbnail…

Ice 6

This visualization plots the Iris dataset’s petal length against petal width, using a D3.js scatter plot rendered as SVG. Circles are colored by species (light blue, light pink, or yellow) with radii fixed at five pixels. The code fetches CSV data from a GitHub gist, applies `d3.scaleLinear` for axes, and uses `d3.select` and `.join` for efficient element creation. Axis labels and tick marks are styled with custom font sizes.

AAmar09nath
90% 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
90% 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
89% match
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
88% match
Loading thumbnail…

Ice 6 MVJ task 2

This visualization displays the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (blue for setosa, yellow for versicolor, and red for virginica). The code uses d3.csv to load the data, d3.scaleLinear with d3.extent for scales, and d3.axisLeft and d3.axisBottom for axes, rendered as SVG circles. It also reads sepal measurements for potential use in point sizing, though the radius remains fixed at 5 pixels. The visualization is built with d3.v6 within a React framework.

MManasa891-git
88% match
Loading thumbnail…

ICE 6 Task 2

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while encoding sepal dimensions through elliptical radii and species via color. The SVG rendering uses D3 v6 scales, axes, and data joins to place circles with fixed radius but variable rx and ry attributes, creating ellipses that reflect sepal measurements. Axis labels identify the variables, and the code explicitly parses numeric fields from the CSV source before applying linear scales.

AAAL FORHAD
87% 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
87% match