ICE6_Q2 - Creating a Scatter Plot with D3

100%

ICE6_Q2 - Creating a Scatter Plot with D3

✓ Published0🌍 Public

Last edited Mar 6, 2022

Created on Mar 6, 2022

This example shows a scatter plot of the classic Iris dataset, mapping sepal length and width for individual flowers and coloring each point by species with green, red, and blue markers. The visualization uses D3 v6’s `scaleLinear` and `extent` to compute axes, then renders the data points as SVG circles with the `select` and `join` API. Axis labels are added via SVG `text` elements, and the plot includes axis ticks generated with `axisLeft` and `axisBottom` from the D3 module.

AI-generated description

MIT Licensed

Similar vizzes

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

91% match

Loading thumbnail…

ICE - 6 Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width on the axes while coloring each point by species (setosa, virginica, or versicolor). Built with D3 v6, it uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to generate the axes and `select` to append SVG circles with a fixed radius. The code also parses numeric fields from CSV data and applies a custom color marker for species.

SSaiSree0122

89% match

Loading thumbnail…

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

89% match

Loading thumbnail…

ICE- 6 Iris Dataset 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 according to its species (setosa, versicolor, or virginica). Using D3 v6, the code loads the CSV data with `d3.csv`, scales the axes with `d3.scaleLinear`, and renders circles as SVG elements. It labels the axes as “Petal-length” and “sepal-length” (the latter rotated via an SVG transform). The plot fills the browser window, with axis ticks generated by `d3.axisLeft` and `d3.axisBottom`.

Ssaidhiraj16

89% match

Loading thumbnail…

ICE6 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions for three flower species. The visualization encodes each data point as a colored circle, with distinct hues representing Iris-setosa, Iris-versicolor, and Iris-virginica, alongside a legend and axis controls. Built with D3 v7, the code uses `d3.scaleLinear` for coordinate mapping, `d3.extent` for domain calculation, and an `axisBottom`/`axisLeft` configuration to render the plot’s axes. Data is loaded from the included `iris.csv` file, with points positioned using `xScale` and `yScale` transforms within a predefined margin layout.

PPlatoch

89% 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

89% match

Loading thumbnail…

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

89% 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

89% match