Skip to main content
SimilarExport ZIP
100%

Reusable Fork of D3 Scatter plot

✓ Published1🌍 Public
GGbemiga Atolagbe
Last edited Jan 29, 2025
Created on Jan 15, 2025
Forked from D3 Scatter plot

This example presents a reusable D3 scatter plot implemented as a React-friendly function module, visualizing the classic Iris dataset. It maps petal length to the x-axis and sepal length to the y-axis using `scaleLinear` scales and `extent` to set domains. The code uses `csv` to load data and `axisLeft`/`axisBottom` for axes, while SVG circles are joined with the data via `selectAll` and `join`. The chart adapts to the browser window size and exposes setter methods for width, height, margins, and radius.

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 Fork of D3 Scatter plot with Symbols

This example demonstrates a reusable scatter plot component built with D3.js and React, visualizing the classic Iris dataset by mapping petal length against sepal length. The component uses a fluent API to configure dimensions, margins, and data mappings, enabling flexible reuse across different datasets. Rendering occurs through SVG elements, with D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions handling coordinate scaling and axis generation. The code showcases a modular approach, separating chart configuration from data loading, which fetches the CSV file asynchronously via `d3.csv` before rendering circles and axes.

GGbemiga Atolagbe
95% match
Loading thumbnail…

Fork of reusable D3 scatterplot

This fork of a reusable D3 scatterplot visualizes the Iris dataset, encoding sepal length and petal width with positions onto an SVG canvas while symbol shapes and colors both map to the species category. The code builds custom plot margins and axes using `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`. It demonstrates a reusable chart pattern in React, where the scatter plot component exposes setter methods for dimensions, data accessors, and margins. Data is loaded asynchronously via `d3.csv` and parsed into numeric values before rendering.

SSamuele Greco
94% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses a reusable D3 module pattern with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The code loads data via `d3.csv` from a gist, parses numeric fields, and applies a configurable margin and radius through a closure-based API. The visualization fills the browser window and uses a full-screen SVG without additional interaction.

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

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset from a GitHub gist, mapping petal length against sepal width. Species determine the symbol shape via `d3.scaleOrdinal` and `d3.symbols`. The React-based example uses a reusable `scatterPlot` function with configurable dimensions, margins, and value accessors, rendering axes through `d3.axisLeft` and `d3.axisBottom` into an SVG. Data loads asynchronously with `d3.csv` from a remote URL, with axes and points fully responsive to the window size.

Mmax-31
93% 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
93% match