Reusable Scatter Plot for Iris Data

100%

Reusable Scatter Plot for Iris Data

✓ Published0🌍 Public

Last edited Mar 21, 2023

Created on Mar 21, 2023

Forked from DV ICE7-Reusable Scatter Plot for Iris Data

A reusable scatter plot displays the Iris dataset by mapping petal width to the x-axis and sepal length to the y-axis, with species represented by distinct symbols. Built with D3.js, the chart uses `scaleLinear`, `scaleOrdinal`, and `symbol` to generate SVG paths, while `axisLeft` and `axisBottom` render labeled axes. The visualization adapts to the browser window size and loads data from a remote CSV file.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable Scatter Plot

This reusable scatter plot displays the Iris dataset, mapping petal and sepal measurements against each other while coloring each point by species. Constructed with D3 6.7.0's `scaleLinear`, `axisLeft`, and `axisBottom` APIs, the visualization animates by cycling the x-axis through different measurement columns every two seconds using `setInterval`. Circles are rendered as SVG elements with per-species colors (green, indigo, red), and the plot is fully parameterized via a custom `scatterPlot` function for flexible reuse.

AAkhila-Battula

94% match

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable scatter plot displays the Iris Dataset, mapping petal length against sepal length for three species of iris flowers. The visualization uses D3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `symbol`, and `symbols` APIs to render an SVG plot with distinct symbols for each species. The chart is built as a configurable D3 module via a `scatterPlot()` function, which accepts width, height, data, value accessors, margins, and radius as chainable options. Data is loaded asynchronously from a CSV file using `d3.csv`.

Aabhineetsingh10

93% match

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot displays the Iris Dataset, mapping petal width to the x-axis and sepal length to the y-axis, with each of the three species represented by a distinct symbol. The chart is built using D3's `scaleLinear`, `scaleOrdinal`, `extent`, `axisLeft`, `axisBottom`, and `symbol` APIs, rendered as SVG with a configured margin and symbol size. The implementation follows the "Towards Reusable Charts" pattern, exposing a configurable `scatterPlot` function that accepts data, value accessors, and layout parameters.

Aavvarijayakrishna99@gmail.com

93% match

Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot visualizes the Iris dataset, encoding species with distinct shapes and colors while mapping petal width against sepal length. Built with d3.v6, it uses d3.scaleLinear, d3.scaleOrdinal, and d3.symbol to render marks as SVG paths. The chart automatically cycles through four axes every 10 seconds, updating the x-value to explore different variable pairs. Dynamic axes and transitions demonstrate a reusable chart pattern inspired by Towards Reusable Charts, with data loaded via d3.csv from a remote gist.

LLakshmipriya-kalapala

92% match

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes the Iris Dataset, showing the relationship between petal width and sepal length with distinct symbols for each species. Built with a custom scatterPlot function, it uses D3's `scaleLinear` and `scaleOrdinal` for axes and symbol scaling, `axisLeft` and `axisBottom` for axis rendering, and `symbol().size()` to generate varied path shapes. The SVG output fills the browser window, with margins and a fixed symbol size of 100, while the data is parsed from a remote CSV, converting numeric columns to numbers before plotting.

EEeshwarReddy

92% match

Loading thumbnail…

Reusable scatter plot

This example demonstrates a reusable scatter plot component built with D3.js, visualizing the Iris dataset. The plot maps petal width to the x-axis and sepal length to the y-axis, with species encoded through distinct SVG symbols. The implementation uses D3's `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `symbol`, and the `join` operator to create a flexible, configurable chart. The iris data is loaded from a CSV file, and the SVG rendering adapts to the full browser window dimensions.

Yyaswanthsen

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

91% match

Loading thumbnail…

Reusable scatter plot

This example presents a reusable scatter plot that visualizes the Iris dataset, with each circle colored by species. It uses D3.js scaleLinear, axisLeft, and axisBottom to map petal width and sepal length. The plot cycles through different data columns every two seconds, animating the x-axis and circle positions. The scatterPlot function encapsulates the chart logic, allowing dynamic updates via setInterval.

SSRI RAM REDDY KOTERU

91% match