Skip to main content
SimilarExport ZIP
100%

Scatter Plot

✓ Published0🌍 Public
Ssugunagar
Last edited Mar 13, 2023
Created on Mar 13, 2023

This scatter plot visualizes the Iris dataset, mapping petal width on the x-axis against sepal length on the y-axis. It uses distinct symbols for each iris species, generated via D3's `scaleOrdinal` and `symbol` APIs to differentiate categories. The plot is rendered as an SVG, with axes created using `axisLeft` and `axisBottom`. The reusable chart component, inspired by Bostock’s "Towards Reusable Charts," accepts configurable data, value accessors, margins, and symbol size, demonstrating a modular approach to D3 visualization.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

scatter plot

This scatter plot visualizes the Iris dataset, displaying petal width against sepal length for three species, each color-coded via `d3.scaleOrdinal`. Built with D3 v6 and SVG, the chart uses a reusable `scatterPlot` function that scales data with `d3.scaleLinear` and renders axes via `d3.axisLeft` and `d3.axisBottom`. The visualization is responsive, filling the window, and includes custom legend and axis labels.

Nnagarjuna1968
92% match
Loading thumbnail…

Scatter Plot with Symbols

This scatter plot displays the Iris Dataset, mapping petal width and sepal length on the x- and y-axes. Each data point is rendered as a distinct SVG symbol according to the flower species, using the d3 symbols API with a size of 100. The implementation builds a reusable scatter plot module with d3.scaleLinear, d3.scaleOrdinal, d3.axisLeft, and d3.axisBottom. Data is loaded from a CSV file via d3.csv, and the plot fills the browser window by setting width and height to window dimensions.

Ggeethanjalikotaru
92% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The visualization uses D3 v7 with the `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` APIs to load and render the data as SVG circles. Axis labels indicate "Petal Length" and "Sepal Length," though the latter appears mislabeled relative to the plotted variables. The chart fills the browser window with margins and styled tick text.

Ffloraho401
92% match
Loading thumbnail…

D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, encoding sepal length against petal width and differentiating species with distinct symbols. The x-axis cycles through four measured attributes every 15 seconds, animating the plot’s transitions. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, and `symbolGenerator` for SVG paths, with axes via `axisLeft` and `axisBottom`. The reusable chart pattern, inspired by Towards Reusable Charts, exposes accessor methods like `.xValue` and `.symbolValue` to configure the visualization.

DDeekshithVemula
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
Loading thumbnail…

Reusable scatter plot with different symbols

This example visualizes the Iris Dataset, mapping petal width to the x-axis and sepal length to the y-axis. Each data point is rendered as a distinct symbol from D3’s `symbols` set, with the species of iris determining which symbol shape is used. The visualization is built as a reusable D3 component using `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol().size(100)` to generate the scatter plot’s marks. The `scatterPlot` function is configured with margin, size, and accessor functions, while the SVG rendering fills the browser viewport.

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

Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal length on the y-axis, with points colored by species (setosa, versicolor, and virginica). Built with D3 v6 and rendered as SVG, it uses `d3.csv` to load data, `scaleLinear` and `extent` to set scales, and `axisLeft` and `axisBottom` for axes. Circle marks are appended via `data().join()`, with a custom color mapping function for each species. The plot fills the browser window and includes labeled axes.

KK V VINITHA
91% match