Reusable D3 scattter plot Jerline

100%

Reusable D3 scattter plot Jerline

✓ Published0🌍 Public

Last edited Mar 28, 2022

Created on Mar 28, 2022

This example demonstrates a reusable scatter plot component built with D3 v6, visualizing the classic Iris Dataset. Data points represent flower measurements, with petal width and sepal length mapped to the x and y axes, while color encodes species (setosa, versicolor, virginica). The scatterPlot function encapsulates core chart logic, including axes, scaling, and circle rendering, and is configurable via fluent setters. An animation cycles through different column combinations every two seconds, updating the plot’s axes. The visualization is rendered as SVG, with a legend and custom styling applied via CSS.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable_D3_Scatter_Plot.

This example presents the classic Iris dataset as an interactive scatter plot, cycling through different attribute pairings on the x-axis (petal width, sepal width, petal length, and sepal length) at regular intervals, while the y-axis remains fixed on sepal length. The visualization uses D3 v6 with a custom reusable `scatterPlot` component built around `scaleLinear`, `axisLeft`, and `axisBottom`, rendering SVG circles with animated transitions via `setInterval`. Data is loaded asynchronously from a GitHub-hosted CSV file using `d3.csv`, with points colored green, blue, or red to distinguish the three iris species; a legend and axis labels accompany the animated plot.

DDineshK2602

89% match

Loading thumbnail…

Reusable D3 Scatterplot

This example demonstrates a reusable D3.js scatterplot that visualizes the Iris dataset, plotting petal width against sepal length. The chart uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and SVG circles for data points. The code implements a modular, configurable scatterPlot function with settable properties for width, height, data, margins, and radius, allowing the same visualization to be easily reused with different datasets or configurations. The rendering is fully SVG-based and fills the browser window.

Aajoua

89% match

Loading thumbnail…

Reusable_D3_Scatter_Plot

This example presents a reusable scatter plot of the classic Iris Dataset, with points colored by species and axes labeled by petal and sepal measurements. The visualization cycles through different measurement combinations every two seconds, updating the x-axis mapping via a `setInterval` animation while the y-axis remains fixed. Built with D3 v6, the code uses `d3.csv` for data loading, `d3.scaleLinear` and `d3.scaleOrdinal` for scales, and `d3.axisLeft`/`d3.axisBottom` for axes. A custom `scatterPlot` module encapsulates the chart, which is rendered as SVG circles with a legend.

SShivaKarpe

89% match

Loading thumbnail…

Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that visualizes the Iris Dataset, displaying measurements like petal width and sepal length as colored circles. It cycles through different column pairs every two seconds, animating the axes and points to show relationships between various flower attributes. The chart uses D3 v6 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` function that follows the reusable chart pattern. Data loads via `csv` from a GitHub Gist, and the SVG rendering updates smoothly as the selected variables change.

AAkrutiKhurana2103

89% match

Loading thumbnail…

D3 Reusable Charts

This example demonstrates a reusable scatter plot component built with D3 v6 that cycles through different iris flower measurements every two seconds. The visualization uses the classic Iris dataset loaded from a GitHub gist, with sepal length plotted on the y-axis while the x-axis rotates through sepal length, petal length, sepal width, and petal width. The scatterPlot function exposes chainable setter methods for configuring dimensions, margins, data accessors, and point radius, while the main script uses D3’s `select`, `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to render the SVG with animated transitions.

Ccardoza-IPH

89% match

Loading thumbnail…

Reusable D3 Scatter Plot

This example visualizes the classic Iris dataset in an animated scatter plot, encoding sepal and petal measurements across four dimensions while color-coding species. A reusable D3 module (`scatterPlot`) builds the plot using `scaleLinear`, `axisLeft`, and `axisBottom`, with circles that update every two seconds to cycle through measurement pairs. The SVG rendering includes a title, axis labels, and a color-coded legend for Iris species.

AAAL FORHAD

89% match

Loading thumbnail…

Reusable D3 Scatter Plot

A reusable scatter plot charts the Iris dataset, with petal width mapped to the x-axis and sepal length to the y-axis. Built with D3 v6, it demonstrates a modular chart factory pattern using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. SVG circles render the data points, with axes and margins configured via a fluent API. Every two seconds, the x-axis mapping cycles through different iris measurements, animating the plot's layout while preserving the same visual encoding.

OOleg Zhernovoy

88% match

Loading thumbnail…

Reusable_D3_Scatter_Plot.

This example demonstrates an animated scatter plot of the Iris dataset, cycling through different feature pairs on the x-axis while keeping sepal length on the y-axis. Points are colored by species using hard-coded color mapping. The visualization uses D3.js (v6) with a reusable `scatterPlot` module that handles scales, axes, and circle rendering via SVG. A `setInterval` triggers updates to the x-value accessor, and the plot re-renders with new axes and titles, including a legend and axis labels.

Yyamunaunt

88% match