Skip to main content
SimilarExport ZIP
100%

Reusable D3 Scatterplot

✓ Published1🌍 Public
Nnicolekevans
Last edited Nov 18, 2022
Created on Nov 16, 2022
Forked from D3 Scatterplot

This example shows an animated scatterplot of the Iris dataset, with circles positioned by petal width on both axes. Built as a reusable D3 component, it renders SVG circles with a staggered transition on update, growing from radius zero on initial entry. The plot uses `scaleLinear` and `scalePoint` for positioning, with `axisLeft` and `axisBottom` for axes. The code loads CSV data via `d3.csv`, applies numeric parsing, and configures margins and radius through a chainable API, with styles setting circle opacity and tick font sizes.

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

Reusable D3 Scatter plot dec14

This example renders a scatter plot of the Iris dataset, plotting petal length against sepal length using a reusable D3 chart component. The code loads data via `d3.csv`, maps values with `scaleLinear`, and renders circles as SVG elements. Axes are added using `axisLeft` and `axisBottom`, while the component’s width, height, margins, and radius are configured through a fluent API. The visualization fills the browser window and updates dynamically based on the provided data.

WWasanta Pruttisarikorn
93% match
Loading thumbnail…

Reusable D3 Scatterplot

This example shows a reusable D3 scatterplot built with React, displaying the Iris dataset with petal width on the x-axis and sepal width on the y-axis. The code defines a configurable `scatterPlot` component using `scaleLinear` and `axisLeft`/`axisBottom` from D3 v7, rendering SVG circles with tooltips. It loads data via `d3.csv` from a remote URL, and the plot adapts to the window size. The component’s chainable setter functions allow customization of dimensions, margins, and data mappings, demonstrating a flexible, modular approach to chart construction.

Rrespingu
92% match
Loading thumbnail…

Fork of Reusable D3 Scatterplot w/o menu

This example displays the classic Iris dataset as an animated scatterplot, mapping petal width to both axes. It leverages D3 v7 (imported via ES modules) to build a reusable `scatterPlot` component, with circles that fade in and grow on load via `transition` and `attr`. SVG is used for rendering, and the visualization is built within a React context, sourcing data from a remote CSV file.

Nnicolekevans
92% match
Loading thumbnail…

Reusable D3 Scatterplot

This example demonstrates a reusable scatterplot component built with React and D3.js, visualizing the classic Iris dataset. It uses `d3.csv` to fetch and parse the data, `scaleLinear` to map petal length and sepal length to pixel coordinates, and `axisLeft` and `axisBottom` to render the axes. The plot is rendered as SVG via a custom `scatterPlot` function that supports configurable width, height, margins, and radius, following a pattern for reusable D3 charts.

MMichael Gomersall
92% match
Loading thumbnail…

Reusable D3 Scatter Plot

This reusable scatter plot displays the Iris dataset, mapping petal and sepal measurements as animated circles. Built with D3 v6 and React, it uses `scaleLinear` to project data values to pixel coordinates, with `d3.axisLeft` and `d3.axisBottom` for axes. The `scatterPlot` function returns a configurable chart instance, toggling between four measurement columns on the x-axis via `setInterval` every two seconds. SVG circles are joined with data, and transitions update their positions smoothly.

TTheo-0201
92% match
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
91% match
Loading thumbnail…

Reuseable Scatter Plot on D3

This example demonstrates a reusable scatter plot component built with D3 and React. It visualizes the Iris dataset, plotting petal length against sepal length, with each data point rendered as a circle with a radius of 5 pixels. The visualization uses D3’s `csv` function to fetch and parse data from a remote URL, and the `select` API to create an SVG canvas that fills the browser window. The scatter plot is implemented as a customizable function, accepting configurable properties for dimensions, margins, data, and axis value accessors.

UUzoemeka Okechukwu Innocent
91% match