ICE-6 (Marks and Channels) - Scatter Plot

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

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

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

ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, plotting petal length against petal width, with each data point colored by species (blue for setosa, black for versicolor, red for virginica). The SVG visualization uses D3 v6 scales (scaleLinear), axes (axisLeft, axisBottom), and data joins to render circles, while React serves as the framework. The code loads data from a CSV URL and parses numeric fields, with additional attributes stored but not affecting the visual encoding.

Kkottenikhil

ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The visualization uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct axes, while circles are bound to the data via `selectAll` and `join`. Data is loaded asynchronously from a CSV URL using D3’s `csv` function, with numeric parsing applied to all measurements. The chart fills the browser window, displaying axis labels for petal length and sepal length.

Ggayathrikavya

ICE - 6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, virginica, or versicolor) via a brightness-based marker function. After loading the CSV data with `d3.csv`, the example uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from D3 v6 to establish scales and axes, while `select` and `join` render circles for each observation. The SVG rendering fills the browser window, with sepal length and width values stored as point metadata but not plotted.

SSaiSree0122

ICE - 6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width as x/y coordinates while encoding sepal length and width in each point’s `rx` and `ry` attributes, with species indicated by color (violet, pink, or a square symbol). The D3 v6 code loads data via `d3.csv`, scales it with `d3.scaleLinear`, and renders SVG circles using `d3.symbol` for the setosa class. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, with custom text labels for petal length and sepal length.

SSweetierams

Scatter Plot - ICE6

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The code uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to render ticks. Circles are appended and filled via d3-selection, with hardcoded color values per species. The SVG spans the full window, and axis labels are added as text elements with rotated positioning.

RRaajithaSabbineni