Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 24, 2023

Created on Mar 24, 2023

This example animates through scatter plots of the Iris dataset, cycling between four measured variables on the x-axis every two seconds. A reusable chart function built with D3 v6 encodes data points as SVG circles, with axes generated by `axisLeft` and `axisBottom`. The code fetches the dataset via `csv` and updates the x-scale through a `setInterval` loop, demonstrating a modular chart pattern.

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 example shows the Iris Dataset as an animated scatter plot, cycling through different pairings of flower measurements every two seconds. The plot is built with D3 v6, using `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and a reusable chart function that updates circles and axes in response to changing data accessors. The visualization uses SVG rendering and a custom `setInterval` loop to switch between four measurement columns.

Nnagasai.mandalapu@gmail.com

94% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This example visualizes the Iris dataset as an animated scatter plot, cycling through four flower measurements as the x-axis every two seconds. Built with D3 v6, it demonstrates a reusable chart pattern where a `scatterPlot` function encapsulates scales, axes, and circle rendering via `selection.join`. The chart updates smoothly by calling `svg.call(plot)` with new x-value accessors, while D3's `scaleLinear` and `axisLeft`/`axisBottom` handle positioning and ticks. The full-screen SVG renders 150 data points with a fixed radius, using data loaded from a CSV and displayed with a tech-themed font.

GGogineni44

94% match

Loading thumbnail…

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

94% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a reusable scatter plot of the Iris dataset, cycling through four measurement columns every two seconds. It animates the x-axis mapping while keeping sepal length on the y-axis. The chart uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` for data loading. A custom `scatterPlot` function builds the SVG, and circles transition between positions as the x-value changes. The visualization fills the viewport and applies styling from the Share Tech font.

Aayodhyanandh

94% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This visualization presents the classic Iris Dataset as an animated scatter plot that cycles through the four measured features on the x-axis every two seconds. The plot uses a reusable `scatterPlot` function built with D3 v6, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and SVG circles. Data loads via `d3.csv` from a GitHub Gist, with the animation driven by `setInterval` to update the x-value mapping, demonstrating the reusable chart pattern.

RRupeshGandham

94% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris dataset, cycling through different flower measurements every two seconds. A reusable D3 scatter plot module uses `scaleLinear`, `axisLeft`, and `axisBottom` to render circles in an SVG. The code imports data via `csv` from D3 v6, parses numeric columns, and updates the x-axis mapping with `setInterval`. The full-window visualization includes custom styling from the Share Tech font.

PPoojaThandra

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

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