Skip to main content
SimilarExport ZIP
100%

Reusable Scatter Plot with Iris Data

✓ Published0🌍 Public
Ggopiganta
Last edited Mar 27, 2022
Created on Mar 27, 2022

This reusable D3 scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while coloring each point by species (green for setosa, purple for versicolor, red for virginica). The code loads CSV data via `d3.csv`, uses `d3.scaleLinear` for axes, and renders circles as SVG marks. It also applies `d3.axisLeft` and `d3.axisBottom` for labeled scales, with axes and text styled via CSS. The plot is fully responsive, sizing to the browser window.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

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
93% match
Loading thumbnail…

Reusable D3 Scatter Plot.

This reusable D3 scatter plot visualizes the Iris dataset, mapping petal and sepal dimensions for three species (setosa, versicolor, virginica) with distinct colors. A setInterval animation cycles through different x-axis attributes (petal_width, sepal_width, petal_length, sepal_length) every few seconds, updating the axes and point positions. Built with d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom, the plot renders as an SVG with circles and includes custom legends and axis labels. The data comes from a CSV loaded via d3.csv.

Eeravellisaimeghana
92% match
Loading thumbnail…

Reusable D3 Scatter Plot.

This reusable D3 scatter plot visualizes the Iris dataset, mapping petal and sepal dimensions for three species (setosa, versicolor, virginica) with distinct colors. A setInterval animation cycles through different x-axis attributes (petal_width, sepal_width, petal_length, sepal_length) every few seconds, updating the axes and point positions. Built with d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom, the plot renders as an SVG with circles and includes custom legends and axis labels. The data comes from a CSV loaded via d3.csv.

Eeravellisaimeghana
92% match
Loading thumbnail…

Reusable for scatter plot

This reusable scatter plot visualizes the Iris Dataset, mapping petal length against sepal length with color-coded circular marks. Built with D3 v7, it demonstrates a modular chart factory pattern where configuration methods like `.width()`, `.data()`, and `.radius()` are chained to customize the visualization. The code uses `d3.scaleLinear` for coordinate mapping, `d3.axisBottom` and `d3.axisLeft` for axes, and renders SVG circles and groups. Data loads from a remote CSV file and is parsed with type coercion for numeric columns.

FFrancisco Ibelles
92% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example visualizes the Iris dataset with a D3.js scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. Each species—setosa, versicolor, and virginica—appears in a distinct color via a d3.scaleOrdinal color scale. The code loads CSV data with d3.csv, scales the axes using d3.scaleLinear, and renders circles in an SVG container with d3.axisBottom and d3.axisLeft for labeled axes.

Pprince.sahith100@gmail.com
92% match
Loading thumbnail…

Reusable Scatter Plot - Data Visualization

This reusable scatter plot visualizes the Iris dataset, mapping petal width against sepal length. Each circle represents a data point, color-coded by species (setosa, versicolor, virginica) using a custom `getColor` function. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while the `scatterPlot` factory pattern allows dynamic updates to x-value selections. The SVG is drawn full-window on an orange background with white text and axis labels.

DDanthalakirankumar
92% match
Loading thumbnail…

Reusable D3 Scatter Plot

This scatter plot visualizes the Iris flower dataset, mapping petal length against sepal length. The D3.js code loads the data via `d3.csv` from a Gist URL, then uses a custom `scatterPlot` function. The chart creates a reusable component with settable `width` and `height` properties, rendered as SVG circles. Linear scales via `d3.scaleLinear` position the marks, while `d3.axisLeft` and `d3.axisBottom` add labeled axes with a margin-based layout, all drawn within a full-window SVG.

AAaron
92% match
Loading thumbnail…

Reusable Scatter Plot 11540905

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length with distinct D3 symbols representing different species. The D3 v6 code uses a custom reusable `scatterPlot` module with `scaleLinear` for axes, `scaleOrdinal` for symbol encoding, and `d3.axisLeft`/`d3.axisBottom` for ticks. Data is loaded as CSV and parsed into numeric columns. The SVG renders within the full viewport, with marks generated via `d3.symbol` and a fixed symbol size of 100.

Nnagasai-gummadi
92% match