Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Jul 1, 2022

Created on Jul 1, 2022

This fork of a reusable D3 scatter plot animates through columns of the Iris Dataset, switching the x-axis mapping every two seconds among petal width, sepal width, petal length, and sepal length. Using D3 v6 APIs such as `scaleLinear`, `axisLeft`, and `axisBottom`, it renders SVG circles and updates axes via a reusable chart function pattern. The visualization also applies the Share Tech font and loads data from a CSV URL, with the animation driven by `setInterval`.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates the Iris dataset, cycling through four numeric columns (petal_width, sepal_width, petal_length, sepal_length) every two seconds using `setInterval`. Each cycle re-binds the x-axis to a new column while keeping sepal_length on the y-axis, updating circles and axis ticks via `selection.join()`. The visualization uses d3.csv to load the data, `scaleLinear` for scaling, and `axisBottom`/`axisLeft` for axes, with SVG rendering styled using the Share Tech font.

Eethanrampersaud@gmail.com

95% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a D3 scatter plot animates through the Iris dataset's four numeric columns, switching the x-axis attribute every two seconds. The visualization uses a reusable `scatterPlot()` function that draws SVG circles with `d3.select`, `d3.scaleLinear`, and `d3.axisBottom`. Data loads via `d3.csv` from a GitHub Gist, with coordinates mapped to petal and sepal measurements, while the y-axis remains fixed on sepal length.

Nnishanththouta16@gmail.com

94% match

Loading thumbnail…

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

94% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a fork of a reusable D3 scatter plot that visualizes the Iris dataset, with four attributes available for cycling on the x-axis. A timer updates the plot every two seconds, switching which column is mapped to the x-axis while the y-axis remains fixed to sepal length. The chart uses `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.extent` from D3 v6, rendering points as SVG circles with a fixed radius. The animation is driven by `setInterval`, re-invoking the scatter plot function to update the axis and circle positions.

NNaimisha-M

94% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates through the four numeric columns of the Iris dataset, cycling every two seconds. It visualizes the flower measurements as circles colored by species, with axes and a legend. The implementation uses D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` within a custom `scatterPlot` function, and renders to SVG with an animated update via `setInterval`.

SSnapika

94% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates through four columns of a custom Iris dataset, cycling every two seconds between Height, Length, TopLeftCornerX, and TopLeftCornerY as the x-axis variable. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and data joins to render SVG circles and axes. The chart is driven by a `scatterPlot` closure that accepts configurable accessors, with `setInterval` triggering re-renders. The dataset is loaded via `csv` from a remote gist, with a full-viewport SVG and the Share Tech font.

KKeerthipriyaBankuru

94% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris Dataset, where the x-axis cycles every two seconds through the four measured features (petal width, sepal width, petal length, sepal length) while the y-axis remains fixed on sepal length. It uses D3 v6's `csv` loader, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` within a reusable chart pattern. SVG circles are positioned and transitioned via a `setInterval` loop that calls the chart function repeatedly, with styling applied from the Share Tech font.

Ssnehareddygurram

93% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates the Iris Dataset, cycling through four flower measurements (petal width, sepal width, petal length, sepal length) on the x-axis every two seconds while keeping sepal length on the y-axis. Built with D3 6.7.0, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles as SVG, with the data fetched as CSV from a GitHub gist. The animation runs via `setInterval`, redrawing the plot with a new x-value mapping.

SSaiSree0122

93% match