Skip to main content
SimilarExport ZIP
100%

reusable D3 Scatter Plot

✓ Published2🌍 Public
PPeiyang Li
Last edited Apr 19, 2023
Created on Apr 19, 2023

This interactive scatter plot visualizes Fisher's Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. The visualization is built as a reusable D3 module, where the scatter plot is rendered as an SVG with circles representing individual data points. It uses D3's `scaleLinear()`, `extent()`, `axisLeft()`, and `axisBottom()` for scaling and axis generation, with data fetched from a remote CSV file. The plot dynamically sizes to the viewport and includes hover tooltips showing the coordinate values for each point.

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

Reusable Scatter Plot

A reusable scatter plot visualizes the Fisher Iris dataset, plotting sepal length on the y-axis against different flower measurements on the x-axis. Points cycle through petal_length, petal_width, sepal_width, and sepal_length every two seconds, updating the axis label and dot positions with animation. Built with React and D3 v7, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, and `join` to update SVG circles. The CSV data is loaded via `d3.csv` from a remote GitHub source.

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

Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, cycling through different combinations of petal width and sepal length every three seconds. Using the D3.js library, it employs a declarative, reusable `scatterPlot` component that leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. The SVG visualization dynamically updates its x-value mapping, animating through the dataset columns while rendering circles and labeled axes with a fixed margin and radius. Data is loaded asynchronously from a remote CSV via `d3.csv`.

Lliu yang
91% match
Loading thumbnail…

reusable D3 Scatter Plot (dynamic)

This interactive scatter plot visualizes the Iris dataset, dynamically cycling through four different attribute pairs every two seconds to reveal correlations between petal and sepal measurements. Built with React and D3.js, the visualization uses `scaleLinear` for axis scaling and `axisLeft`/`axisBottom` for tick marks, while SVG circles represent data points with animated transitions between views. The chart is fully reusable through a custom `scatterPlot` function that accepts configurable width, height, margin, and radius parameters, demonstrating a flexible pattern for building dynamic D3 visualizations.

PPeiyang Li
91% match
Loading thumbnail…

Reusable D3 Scatter Plot

This reusable scatter plot, built with React and rendered as SVG, displays the Iris dataset, plotting petal width against sepal length. Implemented using D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, the visualization features a custom, configurable `scatterPlot` function that chains methods for setting dimensions, data, axes, and point radius. The code loads data via D3’s `csv` and uses a minimalist interface with Share Tech typography, showing how a flexible D3 component can be integrated into a React application.

Ppawelsapiecha
91% match
Loading thumbnail…

reusable D3 scatterplot

This reusable D3 scatterplot displays the classic Iris dataset, plotting petal width against sepal length with points colored by species via a categorical color scale. The visualization is built as a custom D3 function that returns a chart component, configured through fluent setter methods for dimensions, margins, data accessors, and radius. Using SVG rendering, the code applies `scaleLinear` for both axes, `scaleOrdinal` with `schemeCategory10` for categories, and `axisLeft`/`axisBottom` for ticks. The scatterplot is rendered inside a React-compatible structure despite using plain D3 selections.

SSamuele Greco
91% match
Loading thumbnail…

Reusable D3 scatter plot

This example presents an interactive scatter plot of the classic Iris flower dataset, using SVG circles to visualize relationships between different measurements like petal length and sepal length. Built with React and D3 v3, the visualization cycles through four data columns every two seconds, smoothly animating the transition of points across axes via D3’s `transition.attr` method. The reusable `scatterPlot` function leverages D3 scales (`scaleLinear`), axes (`axisLeft`, `axisBottom`), and data joins to dynamically update the visualization. The code loads data from a remote CSV using `d3.csv` and adapts to the browser viewport dimensions.

Bbjfmbeck
91% match