Fork of Reusable D3 Scatter Plot

Fork of Reusable D3 Scatter Plot

This example displays the Iris Dataset as an animated scatter plot, cycling through four different feature combinations every two seconds. The visualization is constructed using D3.js version 6.7, leveraging `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data values to SVG circle positions. The plot is rendered as a full-window SVG, with data loaded from a CSV file hosted on GitHub. A reusable `scatterPlot` charting function encapsulates the rendering logic, allowing dynamic updates of the x-axis mapping without rebuilding the entire visualization.

MMar-99

Nnagasai.mandalapu@gmail.com

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.

Fork of Reusable D3 Scatter Plot_curr

This animated scatter plot visualizes the Iris flower dataset, cycling through four measurement columns as the x-axis every two seconds. Using D3 v6, it renders SVG circles and axes via a reusable scatterPlot function, scaling with the window dimensions. The visualization updates x-axis mappings via `setInterval`, calling the plot with new data accessors, while axes are redrawn using `axisBottom` and `axisLeft`.

Sskmriyaz0786@gmail.com

Fork of Reusable D3 Scatter Plot

A reusable scatter plot renders the Iris dataset as animated circles, cycling through four measurement axes every two seconds. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map petal and sepal dimensions. The `scatterPlot` module accepts configurable accessors and margins, while `setInterval` triggers re-renders. SVG circles and axes update smoothly, styled with the Share Tech font.

IIsabel Cayer

Fork of Reusable D3 Scatter Plot

A scatter plot visualizes the Iris Dataset, with points representing flowers and axes mapping petal width against sepal length. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes and SVG circles for data marks. The x-axis mapping cycles through four dataset columns every two seconds via `setInterval`, animating the plot's perspective. The chart is implemented as a reusable function following the "Towards Reusable Charts" pattern, with animated updates triggered by re-calling the plot on the same SVG selection.

OOska Cheng

Fork of Reusable D3 Scatter Plot

The visualization displays the Iris Dataset as a scatter plot, animating between four measurement variables every two seconds. It uses D3 v6’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` loader. The reusable chart pattern, inspired by Bostock’s “Towards Reusable Charts,” configures width, height, margins, and radius via getter-setter methods. SVG circles and axes update in-place through `selection.join`, while `setInterval` cycles the x-axis variable among petal width, sepal width, petal length, and sepal length.

PPlatoch

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, cycling through four numeric attributes on the x-axis every two seconds. The reusable chart component uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map petal and sepal measurements to SVG circles with a fixed radius. Axes update dynamically via `setInterval`, while the chart’s configuration methods for width, height, margins, and value accessors enable customization. The visualization demonstrates a modular pattern for building flexible, animated plots with D3’s data joins and SVG rendering.

SSnapika

Fork of Reusable D3 Scatter Plot

This example shows the classic Iris Dataset as an animated scatter plot, cycling through four measured attributes every two seconds to compare sepal and petal dimensions. It uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render axes and circles in SVG. A reusable chart function with getter/setter methods updates the x mapping in response to a `setInterval` timer, calling the plot again to refresh marks. Styling uses the Share Tech font with a full-window layout.

Ssirenajbpearl@gmail.com