Fork of Reusable D3 Scatter Plot

Fork of Reusable D3 Scatter Plot

This visualization displays the Iris dataset as an animated scatter plot, cycling through different feature pairs every two seconds. It uses D3.js v6 with reusable chart components, employing `scaleLinear` for axes, `scaleOrdinal` with `symbols` for point shapes, and `axisLeft`/`axisBottom` for tick marks. The plot transitions between four measurement columns—PetalWidth, SepalWidth, PetalLength, and SepalLength—using `setInterval` to redraw the SVG with new x-value assignments.

Bbhanuteja1807@gmail.com

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 animated scatter plot visualizes the Iris dataset, mapping petal and sepal measurements across four dimensions. The chart cycles through different variable pairings every two seconds, dynamically updating the x-axis while points shift and recolor by species (green, yellow, red). The reusable chart pattern from Bostock’s “Towards Reusable Charts” uses d3.scaleLinear, axisBottom, axisLeft, and SVG circles. Data loads via d3.csv from a GitHub gist, with viewport-sized rendering and custom label annotations.

AAshrith Kudidhi

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 visualization displays the Iris Dataset as an animated scatter plot, cycling through four different variable pairings every two seconds. The plot demonstrates a reusable D3 chart pattern, where the `scatterPlot` function encapsulates scales, axes, and circle rendering. Using d3.scaleLinear for positioning, d3.axisLeft and d3.axisBottom for ticks, and d3.join for efficient circle updates, the SVG animation smoothly transitions between petal width, sepal width, petal length, and sepal length on the x-axis. Data loads asynchronously via d3.csv from a GitHub Gist.

SSheshidharreddy

Fork of Reusable D3 Scatter Plot

A reusable scatter plot displays the Iris Dataset, cycling through four measured attributes as the x-axis variable on a two-second interval. The visualization, built with D3 v6 and rendered as SVG, uses `scaleLinear` and `extent` for scales, `axisLeft` and `axisBottom` for axes, and `selection.join` to bind data to circles. The plot's dimensions adapt to the browser window, and its configuration is updated via a `setInterval` callback that changes the `xValue` accessor and re-invokes the chart function.

Bbepnye@gmail.com

Fork of Reusable D3 Scatter Plot

This visualization displays the Iris Dataset in a scatter plot that cycles through different attribute pairings every two seconds. Built with D3 v6, it uses reusable chart patterns where scales, axes, and circles are updated via selection joins. The animation rotates through petal width, sepal width, petal length, and sepal length as the x-axis, with sepal length fixed on the y-axis. SVG rendering and D3’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs drive the interactive updating, animated with `setInterval`.

Kkirangithub23

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