Reusable Scatter Plot for Iris Dataset ICE-7

100%

Reusable Scatter Plot for Iris Dataset ICE-7

✓ Published1🌍 Public

Last edited Mar 28, 2022

Created on Mar 27, 2022

This reusable scatter plot visualizes the Iris dataset, mapping petal width and sepal length for three species of iris flowers distinguished by color. Built with D3 v6, it uses a custom `scatterPlot` function that leverages `scaleLinear`, `axisLeft`, and `axisBottom` to render the SVG axes and circles. The chart also displays a color-coded legend and accepts configurable margins and radius. Though the code defines an animation-less SVG rendering, it prepares nested shapes using `rx` and `ry` attributes, suggesting potential ellipse variation. The dataset is loaded asynchronously via `csv` from a GitHub gist URL.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable D3 Scatter Plot ICE 7

This interactive scatter plot visualizes the Iris flower dataset, encoding petal width, sepal length, sepal width, and petal length across the x and y axes. The code uses D3 v6 with a reusable `scatterPlot` module, employing `scaleLinear` for axes, `scaleOrdinal` for symbols, and `symbolGenerator` for markers. An animated `setInterval` cycles through different column pairs every second, while colors distinguish species. The SVG rendering includes axes via `axisLeft` and `axisBottom`, with a legend and title overlaid on screen.

PPrasanth

92% match

Loading thumbnail…

Reusable Scatter Plot- ICE 7 (Data Visualization)

This interactive scatter plot visualizes the Iris dataset, using petal width and sepal length as axes while coloring each point by species (setosa, versicolor, or virginica). The visualization cycles through different column combinations every two seconds, animating the axes and points. Built with D3.js, it uses `scaleLinear`, `axisBottom`, and `axisLeft` to render SVG axes, while a custom `scatterPlot` function manages the reusable chart configuration. The code loads CSV data asynchronously and renders colored circles with dynamic radius values based on sepal dimensions.

SSrilekha24

91% match

Loading thumbnail…

Fork of Reusable Scatter Plot- ICE 7

This animated scatter plot visualizes the Iris dataset, cycling through different sepal and petal measurements on the x-axis while keeping petal width on the y-axis. Each species appears as a distinct color—orange, blue, and black—with a custom legend and labels. Built with D3 v6, the visualization uses `d3.csv` to load data, `scaleLinear` and `extent` for scales, and `setInterval` to cycle through measurement columns. Circles are rendered as SVG elements with custom `rx` and `ry` attributes, and axes are drawn using `axisLeft` and `axisBottom`.

Mmandalasaikrishna007

91% match

Loading thumbnail…

ICE-7 Fork of Reusable Scatter Plot

This example visualizes the Iris Dataset as an interactive scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. It uses three distinct D3 symbol shapes to differentiate iris species, rendering each data point as an SVG path element. The implementation leverages reusable D3 modules including `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `symbols`, and `symbol`, with data loaded asynchronously via `csv`. The chart fills the entire browser window, with axes labeled and styled through CSS.

IIndhuKrishnaraj

91% match

Loading thumbnail…

Reusable Scatter Plot Using Iris Dataset

A reusable D3.js scatter plot visualizes the Iris Dataset, encoding the three species with distinct SVG symbols (circle, plus, diamond) and colors from `schemeCategory10`. It uses `scaleLinear` for axes and `scaleOrdinal` for mapping species to shapes and colors, with the plot implemented as a reusable function with getters and setters for dimensions, data, and margins. Every ten seconds, the x-axis changes to a different flower measurement (petal width, sepal width, petal length, sepal length), dynamically updating the axes and points. Data is fetched from a GitHub gist CSV and parsed with string-to-number conversion for all numeric columns.

Sshiiva-surya

91% match

Loading thumbnail…

ICE-7 Resuable scatterplot

This reusable scatter plot visualizes the Iris dataset, mapping petal width against sepal length and encoding species with distinct D3 symbol shapes (circles, crosses, and diamonds). Built with the reusable chart pattern, the `scatterPlot()` function configures scales, axes, and symbol generators via chained accessor methods. The visualization renders as animated SVG, with axes created using `axisLeft` and `axisBottom`, while `scaleOrdinal` and `symbol` map categorical data to geometric marks. Data loads asynchronously via `d3.csv` and updates smoothly through D3’s data join.

SShridhar Kshirsagar

91% match

Loading thumbnail…

Data Visualization ICE-7 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris flower dataset, showing the relationship between petal and sepal measurements across three species. Built with D3.js (v6.7.0), it uses d3.csv to load data and d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render axes. The plot animates every 1.8 seconds by cycling through different x-axis dimensions via setInterval, while colored circles distinguish species. The SVG rendering includes custom labels and a fixed 6-pixel radius, with data mapped from a GitHub gist URL.

MManasaPatange

91% match

Loading thumbnail…

ICE7 - Reusable Scatter Plot

This example presents a reusable scatter plot visualizing the Iris Dataset, with data points colored by species. Built with D3.js v6, the plot cycles through different attribute pairs on the x-axis, including petal width, sepal width, petal length, and sepal length, updating the axes and circles each second. It uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to construct the chart, along with SVG elements for rendering and a fixed legend for species identification. The implementation follows a reusable chart pattern, allowing dynamic configuration of dimensions, margins, and value accessors.

Ssuchitra2602

91% match