Reusable Scatter Plot

Reusable scatter plot

This example presents a reusable scatter plot that visualizes the Iris dataset, with each circle colored by species. It uses D3.js scaleLinear, axisLeft, and axisBottom to map petal width and sepal length. The plot cycles through different data columns every two seconds, animating the x-axis and circle positions. The scatterPlot function encapsulates the chart logic, allowing dynamic updates via setInterval.

SSRI RAM REDDY KOTERU

Reusable Scatter plot

This animated scatter plot visualizes the Iris dataset, showing relationships between petal and sepal measurements, with points colored by species (setosa, versicolor, virginica). The visualization cycles through different attribute pairs on the axes every two seconds, dynamically updating via a reusable chart component. Built with D3.js v6, it uses scaleLinear for axis scaling, axisLeft and axisBottom for ticks, and SVG circles for marks. The code imports scatterPlot, a custom reusable function following the Towards Reusable Charts pattern, with data loaded via d3.csv.

SSnigdha6698

Reusable D3 Scatter Plot

This reusable scatter plot visualizes the Iris dataset, mapping sepal and petal measurements to x and y axes while coloring each point by species. Built with D3 v6, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`/`d3.axisLeft` to render axes and positioned SVG circles with a custom `scatterPlot()` chart factory. The plot cycles through four measurement combinations every two seconds via `setInterval`, updating the x-axis and circle positions with an animated transition. A static legend identifies the three iris species.

NNikhilMakkena

Reusable Scatter Plot

A reusable scatter plot visualizes the Iris dataset, encoding species with distinct shapes and colors while mapping petal width against sepal length. Built with d3.v6, it uses d3.scaleLinear, d3.scaleOrdinal, and d3.symbol to render marks as SVG paths. The chart automatically cycles through four axes every 10 seconds, updating the x-value to explore different variable pairs. Dynamic axes and transitions demonstrate a reusable chart pattern inspired by Towards Reusable Charts, with data loaded via d3.csv from a remote gist.

LLakshmipriya-kalapala

Reusable Scatter Plot

This reusable scatter plot explores the iris dataset, displaying three species of flowers distinguished by color and shape. It cycles through different petal and sepal measurements every ten seconds, dynamically updating both axes and the position of each data point. The visualization is built with D3 version 6, using `scaleLinear` for axes, `scaleOrdinal` with `symbols` for species-specific shapes, and `schemeCategory10` for colors. SVG rendering and an animated transition between variable pairs show how the data relationships shift across dimensions.

BBhavanaGIrni

Reusable scatter plot

This reusable scatter plot animates through the Iris Dataset, cycling the x-axis between petal width, sepal width, petal length, and sepal length every two seconds while keeping petal length on the y-axis. It uses D3 v6 modules including `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `csv` to load data from a GitHub Gist. SVG circles are colored by species, with a legend and axes updated via the `scatterPlot` closure pattern, rendering dynamically to the full browser window.

AArv1228

Reusable Scatter Plot

This reusable scatter plot displays the Iris dataset, mapping petal and sepal measurements against each other while coloring each point by species. Constructed with D3 6.7.0's `scaleLinear`, `axisLeft`, and `axisBottom` APIs, the visualization animates by cycling the x-axis through different measurement columns every two seconds using `setInterval`. Circles are rendered as SVG elements with per-species colors (green, indigo, red), and the plot is fully parameterized via a custom `scatterPlot` function for flexible reuse.

AAkhila-Battula

Reusable D3 Scatter Plot

A reusable scatter plot displays the Iris Dataset, coloring each point by species (setosa, versicolor, virginica) and animating through different feature-pair combinations every six seconds. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and data joins to render SVG circles, while the chart factory pattern (`scatterPlot()`) exposes setters for width, height, margins, and accessors. The animation cycles x-axis values across petal width, sepal width, petal length, and sepal length, updating axes and marks accordingly.

RRamya19-hub