Skip to main content
100%

Reusable D3 Scatter Plot

✓ Published424🌍 Public
CCurran Kelleher
Last edited May 22, 2021
Created on May 8, 2021
Forked from D3 Scatter Plot

A reusable scatter plot demonstrates how to build a modular D3 chart with configurable accessor functions. It visualizes the Iris Dataset using a user-defined `xValue` and `yValue`, rendering SVG circles scaled with `d3.scaleLinear` and axes via `d3.axisLeft` and `d3.axisBottom`. Every two seconds, the plot cycles through different columns—petal width, sepal width, petal length, and sepal length—updating the x-axis and circle positions through a set interval that re-calls the chart function. The example uses D3 v6 and follows the "Towards Reusable Charts" pattern, packaging the scatter plot as a closure with setter methods for width, height, data, margins, and radius.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes