Fork of Reusable D3 Scatter Plot

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris dataset, cycling through different x-axis dimensions (petal width, sepal width, petal length, sepal length) every two seconds while keeping sepal length on the y-axis. It uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll().join()` to render SVG circles and update axes. The reusable chart module, defined via a closure with getter-setter methods, is called with `.call(plot)` to re-render the visualization.

Mmahee0725

Fork of Reusable D3 Scatter Plot

This example presents a reusable scatter plot of the Iris Dataset, where points animate through different x-axis variables (petal width, sepal width, petal length, and sepal length) every two seconds via `setInterval`. It uses D3 v6 APIs such as `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, `csv`, and `select` to render SVG circles with axes. The plot is built as a reusable function that updates its x-value mapping dynamically, demonstrating a configurable chart with a live cycling view of the dataset’s measurements.

Ggopiganta

Fork of Reusable D3 Scatter Plot

A reusable scatter plot animates the Iris Dataset, cycling through four measured variables on the x-axis every two seconds while sepal length remains fixed on the y-axis. Built with D3 v6, the chart uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The code demonstrates a configurable chart factory pattern, where setters like `.width`, `.data`, and `.xValue` update the visualization, with `setInterval` triggering re-renders to switch between petal width, sepal width, petal length, and sepal length.

SSravaniPosina

Fork of Reusable D3 Scatter Plot

SSravaniPosina

Fork of Reusable D3 Scatter Plot

This is a reusable scatter plot that visualizes the Iris Dataset, cycling through different feature combinations every two seconds. The chart maps petal width against sepal length initially, then rotates through other attributes using a `setInterval`. Built with D3 v6, it uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to render axes, with circles positioned via the modular `scatterPlot()` function. The SVG output animates smoothly, updating both data mappings and axis scales with each interval.

JJetlinZ

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates through four columns of the Iris Dataset, cycling the x-axis every two seconds. The chart uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map petal width, sepal width, petal length, and sepal length against sepal length. SVG circles render the data points with a fixed radius. The implementation follows the reusable chart pattern, with `scatterPlot()` exposing width, height, data, value, margin, and radius accessors. Data loads via `d3.csv` from a GitHub Gist, and the visualization updates through `selection.join()` and `setInterval`.

HHarishma Nallala

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates through the Iris Dataset, cycling the x-axis between petal width, sepal width, petal length, and sepal length every two seconds. The visualization uses d3.scaleLinear with extent to map data to positions, d3.axisLeft and d3.axisBottom for axes, and d3.selectAll with a join to update circle elements. The reusable chart pattern from Bostock’s “Towards Reusable Charts” exposes width, height, data, margin, and radius setters. Iris measurements are loaded via d3.csv and parsed as numbers.

Ggeethanjalikotaru

Fork of Reusable D3 Scatter Plot

This example presents a scatter plot of the Iris dataset, with axes for sepal length and petal width. The visualization cycles through different data columns every two seconds, updating the x-axis and circle positions via a `setInterval` callback. It is built with D3 v6, using `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, and a reusable chart function pattern. The SVG rendering includes animated transitions as the data mapping changes.

GGogineni44