Skip to main content
SimilarExport ZIP
100%

DV-ICE-6

✓ Published0🌍 Public
Ssowmyanagula@my.unt.edu
Last edited Mar 6, 2022
Created on Mar 6, 2022

This example presents a scatter plot of the Iris dataset, mapping petal length and width on the axes while encoding sepal measurements through circular marker size and species through color. The visualization uses D3 v6 with React, rendering SVG circles positioned via scaleLinear and extent functions. It loads CSV data asynchronously, applies custom parsing to convert numeric fields, and uses axisLeft, axisBottom, and text labels for annotations.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ScatterPlot_ICE6

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers while coloring each point by species (setosa, versicolor, or virginica). The axes are labeled with sepal length and petal length, though the data encoding uses petal dimensions for positioning and sepal dimensions as circle radii. Built with React and d3.v6, the example loads CSV data via `d3.csv`, applies `scaleLinear` and `extent` for scales, and renders SVG circles with attributes driven by the parsed numeric fields. Axis generation uses `axisLeft` and `axisBottom`.

Bbindusreeja
93% 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…

ICE-6 Scatter Plot for iris dataset

This scatter plot visualizes the iris dataset, mapping petal length and width as x/y coordinates while encoding species with color (pink, orange, red). Separately, sepal length and width are applied as non-visual attributes to each circle. The D3.js v6 code loads CSV data via `d3.csv`, scales axes with `scaleLinear`, and renders axes via `axisLeft` and `axisBottom`. The SVG output uses dynamic circle joins to display points across the browser canvas.

HHarshinireddyy19
91% match
Loading thumbnail…

ICE 6 Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length and width on the axes while coloring points by species (setosa, virginica, and versicolor) using blue, red, and black. The code loads CSV data via d3.csv, parses numeric fields, and scales values with d3.scaleLinear and extents. Rendered as SVG circles with a fixed radius, it also includes custom axis labels and tick styling. The visualization uses D3 v6 within a React-free HTML setup, with axes generated via d3.axisLeft and d3.axisBottom, and it leverages window dimensions for a responsive full-screen layout.

MMalempatiSaranya
91% match
Loading thumbnail…

ICE-6: Creating a Scatter Plot with D3.js

This example visualizes the Iris dataset as a scatter plot, mapping petal length and petal width to x and y positions, with circles colored by species (setosa, versicolor, and virginica). The D3.js code loads CSV data with `d3.csv`, parses numeric fields, and uses `scaleLinear` and `extent` to set scales. Axes are rendered with `axisLeft` and `axisBottom`, while `selectAll` and `join` bind data to SVG circles. The visualization fills the viewport and uses a fixed radius for all points.

CChaitanya Galla
90% match
Loading thumbnail…

DV ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, showing horsepower against petal width with circles colored by species (setosa, versicolor, virginica). The code uses D3 v6 to load CSV data, create linear scales with `scaleLinear`, and plot SVG circles. Axes are generated via `axisLeft` and `axisBottom`, with fixed margin and label styling. The data source is the auto-dataset CSV, rendered as an SVG chart inside a React framework.

Yyamunaunt
90% 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
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
90% match