Skip to main content
SimilarExport ZIP
100%

Reusable Scatter Plot

✓ Published2🌍 Public
SShannon Teoh
Last edited May 25, 2024
Created on May 18, 2024
Forked from Scatter Plot

This example demonstrates a reusable scatter plot showing the relationship between petal length and sepal length in the Iris dataset. The plot uses d3.scaleLinear for axes and positioning, d3.axisLeft and d3.axisBottom for axis rendering, and SVG circles for marks. The code exposes a configurable scatterPlot() function with setters for width, height, data, values, margin, and radius, enabling flexible reuse. Data is loaded via d3.csv from a gist, with numeric parsing applied to each row.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable d3 Scatter Plot

This reusable scatter plot displays the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis as SVG circles with a fixed radius. Built as a configurable function using d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom, it fetches CSV data via d3.csv and supports setters for width, height, margins, and value accessors. Applied to a full-window SVG through a D3 selection, the chart renders axes with styled tick text and updates dynamically when re-invoked with new parameters.

AAndrea Mignone
95% match
Loading thumbnail…

Reusable Scatter Plot

This example demonstrates a reusable scatter plot visualizing the Iris dataset, plotting petal length against sepal length. D3.js v7 fetches the CSV data asynchronously, and the code uses d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to map values to SVG circles. The rendering uses a full-window SVG canvas with fixed margins, and the scatter plot marks are drawn via chained d3.select and `.join('circle')` operations.

KKhanAzmat
95% match
Loading thumbnail…

Reusable Scatter Plot

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, plotting sepal length against petal length for each flower variety. The chart uses D3.js v7 with SVG rendering to display circles representing individual data points, with axes scaled linearly from zero to the maximum attribute values. The implementation defines a reusable `scatterplot()` function that accepts a selector, data, and two attribute names, enabling the same visualization logic to be applied to different data fields. The JavaScript code leverages `d3.csv()` for data loading, `d3.scaleLinear()` for coordinate mapping, and D3 axis generators to create the chart.

FFande Workspace
94% match
Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a reusable scatter plot built with D3.js and React, displaying the Iris dataset with petal length on the x-axis and sepal length on the y-axis. The visualization is rendered as an SVG, with circles sized by a configurable radius and axes generated using D3’s `scaleLinear`, `axisBottom`, and `axisLeft`. A custom `scatterPlot()` function encapsulates the chart logic, allowing width, height, margins, and data accessors to be set via a fluent interface, demonstrating a modular approach to building interactive visualizations with D3 v7.

Ttverdone
93% match
Loading thumbnail…

Reusable Scatter Plot

This example plots the classic Iris dataset with petal length on the x-axis and sepal length on the y-axis. The d3.v7 code loads the CSV, parses numeric fields, and uses `scaleLinear` with `extent` to map data to screen coordinates. Circles are bound to the data, with axes generated via `axisLeft` and `axisBottom` within a margin-defined layout. The chart fills the browser window, rendering all points as simple SVG circles with a fixed radius.

GGayan Priyadarshana
93% match
Loading thumbnail…

Reusable Scatter PLot

This example shows a reusable scatter plot of the Iris dataset, colored by species, with petal length on the x-axis and petal width on the y-axis. The plot is built with React and rendered as SVG using D3’s `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, while circles are added via `selection.join`. The dataset is loaded as CSV using D3’s `csv` function, with numeric parsing applied to each row. The scatter plot component is configurable through a fluent API for width, height, data, margins, and other properties.

Sserebryanaya.n@gmail.com
93% match
Loading thumbnail…

SYmbols Reusable Scatter Plot

This example demonstrates a reusable scatter plot built with D3.js and React, visualizing the classic Iris dataset of flower measurements. It shows the relationship between petal length and sepal length as circles, with axes labeled using D3's `axisBottom` and `axisLeft` from version 6.6.2. The code defines a configurable `scatterPlot` component that accepts data, value accessors, dimensions, and margins via a fluent interface, enabling flexible reuse across datasets. Data is loaded from a raw GitHub-hosted CSV file and rendered as an SVG, with circles positioned using `scaleLinear` and `extent` for automatic axis scaling.

SShannon Teoh
93% match
Loading thumbnail…

Scatter Plot - Reusable

This example presents a reusable scatter plot built with D3 and React, visualizing the classic Iris dataset. It maps petal length to the x-axis and sepal length to the y-axis, using D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to generate axes and position circles. The plot is rendered as SVG within a full-screen viewport, with margins and point radius configured through a chainable function interface. Data is loaded asynchronously via D3’s `csv` parser, demonstrating a modular pattern for encapsulating chart logic.

Mmaxthamt
93% match