Skip to main content
SimilarExport ZIP
100%

Reusable D3 Scatter plot dec14

✓ Published1🌍 Public
WWasanta Pruttisarikorn
Last edited Dec 22, 2022
Created on Dec 19, 2022

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.

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

reusable d3 scatterplot

This example shows a reusable D3 scatterplot of Iris flower measurements, plotting petal length against sepal length as circles with ordinal axes. The visualization is implemented as a custom D3 module using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, with data loaded via `d3.csv` from a GitHub gist. The chart’s dimensions, margins, and radius are configurable through chained setter functions, and it renders in an SVG with a React starter template. The code demonstrates a modular, data-joins approach where circles are appended to the selection.

Kktshim@snu.ac.kr
93% match
Loading thumbnail…

Reusable D3 Scatter Plot

This example demonstrates a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. The visualization uses D3 v7 APIs including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to load data, scale positions, and render axes. Circles of fixed radius are drawn as SVG elements with coordinates computed from the scaled values. The chart fills the browser window, with the data sourced from a GitHub Gist and rendering done entirely in SVG.

KKerim
93% match