Fork of 8 class D3 in HTML vanilla

100%

Fork of 8 class D3 in HTML vanilla

✓ Published1🌍 Public

Last edited Jun 9, 2022

Created on Jun 9, 2022

This example visualizes the Iris dataset as a scatter plot with elliptical markers, where each flower’s petal and sepal lengths determine the x and y positions, and widths control the ellipse radii. Points are colored by species using a switch statement for setosa (blue), versicolor (red), and virginica (black). The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` reusable function. Data is loaded from a remote CSV file and rendered as SVG ellipses with interactive titles.

AI-generated description

A reproduction of a title.

MIT Licensed

Similar vizzes

Loading thumbnail…

8 class D3 in HTML vanilla

This example visualizes the Iris dataset as a scatter plot with elliptically shaped marks, encoding sepal and petal measurements across four axes. Each ellipse’s vertical and horizontal radii reflect petal width and sepal width, while its fill color distinguishes the three species (setosa, versicolor, and virginica). The code uses D3 v6 modules like `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, map values to scales, and render axes. SVG ellipses are generated via a custom reusable `scatterPlot` function, with hover tooltips showing raw coordinates and color.

Ccssergio

94% match

Loading thumbnail…

Fork of scatter plot

This example presents a scatter plot of the Iris Dataset, mapping petal length and width for each flower. Points are colored green, yellow, or black to indicate the species (setosa, versicolor, or virginica). The visualization uses D3’s `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions. The SVG circles also encode sepal dimensions via the `rx` and `ry` attributes, though their visual effect is minimal. Data is loaded from a CSV URL, and axes are labeled with custom font styling.

Eeravellisaimeghana

88% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the classic Iris Dataset, mapping petal length and width on the x- and y-axes, with each point colored by species (setosa, versicolor, virginica) via a custom marker function. Built with vanilla HTML and D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The data loads from a remote CSV using `d3.csv`, and the plot fills the browser window, with marks carrying additional sepal measurements as unused `rx` and `ry` attributes.

Ppreethamkesa

88% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This D3.js (v6) scatter plot visualizes the classic Iris Dataset by plotting petal length against sepal length. Points are colored by species—setosa in chartreuse, versicolor in orange, and virginica in blue—with axes labeled and rendered by `axisLeft` and `axisBottom`. The code loads CSV data via `d3.csv`, maps values using `scaleLinear` and `extent`, and draws circles as SVG marks. The chart fills the browser window, with axis labels added as text elements.

VVaishnavi6199

88% match

Loading thumbnail…

Fork of Scatter Plot Using Iris Data

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes. Points are colored by species using a switch statement, with setosa, versicolor, and virginica shown in orange, green, and purple. The code loads CSV data via `d3.csv`, uses `scaleLinear` and `extent` for scales, and renders circles with SVG attributes. Axis labels and tick text are styled with custom fonts, and the plot fills the browser window.

DDINESH SAI BOPPANA

88% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris dataset, plotting petal length against petal width for individual flower specimens while color-coding points by species (setosa, versicolor, and virginica). It uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to generate axes and map data to screen coordinates. The SVG circles are rendered with `select`, `append`, and a join operation, and the data is loaded via `d3.csv` from a raw GitHub source.

Bblikitha

87% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length against petal width, with points colored by species (setosa, versicolor, and virginica). The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render SVG circles. The plot is sized to the full window and uses a fixed radius of 4 pixels for each point. Data is fetched from a GitHub-hosted CSV file.

Vvidhyanamini

87% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This D3.js (v6) scatter plot visualizes the Iris Dataset, mapping petal length and width for each flower sample while encoding species with distinct colors (purple, red, teal). The SVG rendering uses `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for tick marks. Circular marks are positioned via `selectAll('circle').join('circle')` and labeled with rotated axis titles for petal length and width. The plot fills the browser window and includes a 24px tick font size for readability.

YYbg99g

87% match