100%

Fork of Fork of D3 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 30, 2026

Created on Mar 30, 2026

A reusable scatter plot built with the reusable chart pattern displays the Iris dataset from Curran's Gist repository. It uses `d3.scaleLinear`, `extent`, and `axisBottom`/`axisLeft` for axes, with the chart configured via chainable methods for width, height, margin, and data accessors. The plot responds to data updates by joining circles to the DOM, rendering petal length against sepal length with steelblue points at 5-pixel radius and 0.7 opacity.

AI-generated description

D3 Scatter Plot

A reusable D3 scatter plot component built with the reusable chart pattern.

Features

Reusable chart function following D3 conventions
Configurable margins, dimensions, and data accessors
Responsive to data updates
Clean axis rendering

Data

Uses the Iris dataset from Curran's Gist repository.

Configuration

The chart can be configured using chainable methods:

.width(value) - Set chart width
.height(value) - Set chart height
.margin(object) - Set margins
.xValue(function) - Set X-axis data accessor
.yValue(function) - Set Y-axis data accessor

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. Each circle is colored by species using a `d3.scaleOrdinal` with lightblue, lightgreen, and orange ranges. The visualization loads CSV data from a GitHub gist, converts relevant columns to numbers, and uses `d3.axisBottom` and `d3.axisLeft` for axes with custom labels. It is built as a reusable function that appends an SVG with fixed dimensions and margins, rendering all points as circles with a radius of 5 pixels.

Pprince.sahith100@gmail.com

92% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

A scatter plot visualizes the Iris Dataset, with points representing flowers and axes mapping petal width against sepal length. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes and SVG circles for data marks. The x-axis mapping cycles through four dataset columns every two seconds via `setInterval`, animating the plot's perspective. The chart is implemented as a reusable function following the "Towards Reusable Charts" pattern, with animated updates triggered by re-calling the plot on the same SVG selection.

OOska Cheng

91% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of the Iris Dataset, mapping petal width on the x-axis against sepal length on the y-axis, with each flower represented by a circle. It uses a reusable chart pattern where the scatter plot function is configured via chained setter methods for dimensions, margins, and data accessors. The visualization is rendered as SVG, with axes generated using d3-axis and scales created with d3-scale. The code leverages d3.csv for data loading and d3.select to append the SVG to the page.

DDaniel Eduardo Contro

91% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable d3 scatter plot visualizes the Iris Dataset, plotting petal width against sepal length as colored circles. It loads CSV data via `d3.csv` and renders SVG circles using a custom `scatterPlot` reusable chart function. The chart uses `scaleLinear` for x and y axes, with `axisLeft` and `axisBottom` for labeled scales, and configurable margins, dimensions, and radius through function chaining.

Rrcoutts

91% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This responsive D3 scatter plot visualizes the Iris Dataset, mapping sepal measurements to x/y coordinates with a fixed radius. It demonstrates a reusable charting pattern by encapsulating scales, axes, and circles within a configurable `scatterPlot` function. The SVG rendering uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to generate axes, while `d3.csv` loads remote data. The plot is drawn on an `svg` element sized to the browser window, with styling applied via the Share Tech font.

Ssirenajbpearl@gmail.com

90% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of the Iris Dataset, mapping petal width to the x-axis and sepal length to the y-axis. The visualization uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles. The chart is implemented as a reusable function, taking data, dimensions, margins, and accessor functions as configurable properties. It renders full-screen as an SVG, with each data point drawn as a circle with a fixed radius of 5 pixels.

LLeah Mitchell

90% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length against petal width. The reusable chart component updates every two seconds, cycling through different x-axis columns to reveal patterns across all four flower measurements. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and data joins to render SVG circles. Each species appears as a distinct cluster, with axes and tooltips drawn from the `scatterPlot` factory function.

Mmukundakrishna.r@gmail.com

90% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length for individual flowers. Built with D3 v6, it uses a reusable scatter plot component configured with `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The chart loads CSV data from a remote gist, parses numeric fields, and scales points across the full browser window. The minimalist styling uses the Share Tech font and a white background.

AAleksei Vozhdaev

90% match