Bundles

100%

✓ Published0🌍 Public

Last edited May 3, 2024

Created on May 2, 2024

This visualization displays the classic Iris dataset as a scatterplot, mapping petal length on the x-axis against sepal length on the y-axis. Points are colored on a green gradient based on their petal length value. The implementation uses D3 v5’s `csv` loader and `scaleLinear` for positioning, with `axisLeft` and `axisBottom` for the axes. Rendered as SVG circles, the marks are animated via a `setInterval` loop that re-joins the data every 100 milliseconds, creating a subtle flickering effect as the points refresh.

AI-generated description

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

Similar vizzes

Loading thumbnail…

iris

This visualization displays the classic Iris flower dataset as a scatterplot, mapping sepal length and width to the x and y axes, petal length to point size, and species to color. The rendering uses D3 v4’s SVG output. Data loading relies on `d3.csv` for parsing the CSV file, while scales are built with `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal`, plus axes from `d3.axisBottom` and `d3.axisLeft`. A categorical legend, built with circle elements, identifies the three species (setosa, versicolor, virginica), and a tooltip div is appended to the body but never made visible.

GGTHamonville

86% match

Loading thumbnail…

Iris Scatter

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis, with all points rendered as uniform blue circles. The code uses D3 v6’s `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to construct the coordinate system and axes. Data is loaded asynchronously via `d3.csv` from a GitHub Gist, and the SVG output is created by appending a single `<svg>` element and iterating over parsed rows to draw the marks.

Rreddyakshitha

86% match

Loading thumbnail…

D3 Scatterplot

This visualization displays the classic Iris dataset, plotting petal length against sepal length. Each flower sample is rendered as a fixed-radius circle in an SVG canvas that fills the browser viewport. The code uses D3 v7's `csv` loader to fetch data from a GitHub gist, then employs `scaleLinear` with `extent` to compute domains for both axes. Axis ticks are generated using `axisLeft` and `axisBottom`, with the categorical iris species left uncolored in this minimal example. The rendering relies on D3's declarative selection-based joins to bind data to SVG circle elements, with dimensions set to the window's inner height and width.

Mmegan-grannan

86% match

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width for each sample while coloring points by species (setosa, versicolor, virginica). It uses D3 v6’s `csv` loader, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to render an SVG chart. Circle marks encode petal measurements, while sepal length and width are stored as unused `rx`/`ry` attributes. The axes are labeled with rotating text, and the visualization fills the browser window, with the data fetched from a GitHub-hosted CSV file.

Bbhargavarathod

86% match

Loading thumbnail…

Iris Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, mapping sepal length on the x-axis against petal length on the y-axis. Each of the 150 flowers appears as a colored point, with a legend distinguishing the three species (setosa, versicolor, and virginica) using a pastel ordinal color scale. Built with D3 v7, the code loads CSV data via `d3.csv`, applies linear scales with `d3.scaleLinear` for axes, and renders SVG circles, axis ticks, labels, and a custom legend.

Mmaddulanagasanjana@gmail.com

86% match

Loading thumbnail…

Iris Dataset Scatterplot

This scatterplot visualizes the Iris Dataset, plotting petal length against sepal width for 150 flower samples. The visualization displays data points as circles with a teal fill, using linear scales created with d3.scaleLinear and extent to map the data to SVG coordinates. React components structure the axis and mark rendering, while d3.csv loads and parses the remote dataset, converting numeric fields with unary plus operators. The code includes custom axis components that generate tick marks and labels, and a marks component that renders circles with native SVG title tooltips.

LLaura Johnson

86% match

Loading thumbnail…

assign2-q5

This visualization displays the classic Iris dataset as an animated scatterplot, mapping sepal length and width along the axes while encoding petal width through circle radius and species through color. The visualization uses D3 v6 with a reusable chart pattern, employing `scaleLinear`, `scaleOrdinal`, and `axisLeft`/`axisBottom`. Circles transition over two seconds to their final radius using `transition().duration(2000)`. Data loads from a remote CSV via `d3.csv`, and the SVG rendering fills the full browser window.

Ppardha1411

86% match

Loading thumbnail…

Iris Dataset Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length to the x-axis and petal width to the y-axis. Each circle represents an individual flower, with color indicating species: black for setosa, green for versicolor, and yellow for virginica. The code uses d3.csv to load the data, then applies d3.scaleLinear with d3.extent for axes, rendered via d3.axisLeft and d3.axisBottom. The SVG circles are positioned using this scaling, and text labels for axes are appended manually.

AABCDB15

86% match