Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot

✓ Published1🌍 Public
NNaimisha-M
Last edited Jul 1, 2022
Created on Jul 1, 2022

This scatter plot visualizes the classic Iris dataset, displaying petal width against sepal length for each sample. The chart uses a reusable D3 module with a fluent interface, built on `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`axisBottom` for scaled axes. Rendered as an SVG, the visualization cycles through four different feature pairings every two seconds via `setInterval`, updating the x-axis and circle positions in place. The code leverages D3 6.7.0 and fetches the dataset from a GitHub Gist, with a custom "Share Tech" font applied to the axis labels.

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 visualization demonstrates a reusable scatter plot displaying the Iris dataset, cycling through four attribute combinations every two seconds to compare petal and sepal measurements. Built with D3.js v6, the chart uses `scaleLinear` and `extent` for scales, `axisLeft` and `axisBottom` for axes, and SVG circles for data points. The code implements a reusable chart pattern with configurable accessors, and the animation transitions between different x-axis variables using `setInterval` while maintaining a fixed y-axis of sepal length. The implementation includes a custom font and full-window responsive sizing.

NNaimisha-M
95% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length, with points colored by their attributes. Built using D3.js (v6), it employs `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and SVG circles for marks. The chart automatically cycles through four numeric columns—petal width, sepal width, petal length, and sepal length—on the x-axis every two seconds via `setInterval`. Data is loaded asynchronously from a CSV URL using `csv` and parsed into numbers. The reusable chart pattern, inspired by Towards Reusable Charts, accepts configurable accessor functions, with styling handled by the Share Tech font.

Ssaiyogesh9911@gmail.com
94% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, encoding petal length and sepal length on the x- and y-axes while coloring each circle by species (setosa, versicolor, virginica). The visualization cycles through different column pairings every two seconds, animating between sepal width, petal length, and other measurements. Built with D3 v6, the example uses `d3.csv` for data loading, `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` for scales and axes, and SVG circles for rendering. It also demonstrates a reusable chart pattern with a custom `scatterPlot` factory function.

NNaimisha-M
94% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing petal width against sepal length with points colored by species. Built with D3 v6, the visualization cycles through different variable pairings every two seconds using a reusable chart pattern. The SVG marks use the `d3.scaleLinear` and `d3.scaleOrdinal` APIs, with axes generated by `axisBottom` and `axisLeft`. A legend identifies the three species, while a `setInterval` loop updates the x and y value functions to animate through the dataset’s four numeric columns.

MMar-99
94% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This reusable scatter plot visualizes 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 v6, it uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` function to render SVG circles and axes. The animation is driven by `setInterval` and repeated `svg.call(plot)` invocations, with styling from the Share Tech font. Data loads via `csv` from a GitHub Gist.

Kkhalil-ryu
94% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, cycling through four numerical attributes (petal width, sepal width, petal length, and sepal length) on the x-axis every two seconds while keeping sepal length on the y-axis. It uses D3.js v6 with `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, and updates the visualization by re-calling the chart function. The plot renders as SVG circles with animated transitions, and the code dynamically binds new data values to update the x-scale domain and circle positions, showcasing a modular chart pattern for interactive data exploration.

Sshailajat1998@gmail.com
94% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, cycling through four different x-axis variables (petal width, sepal width, petal length, sepal length) every two seconds to compare against sepal length on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, while circles are created via a `.join` operation. The visualization demonstrates a reusable chart pattern where the same plot function is re-invoked with new data mappings, producing an animated tour of the dataset's dimensions.

MM Hema
94% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, with each point representing a flower specimen. The visualization cycles through four different attribute combinations (petal width, sepal width, petal length, and sepal length) as x-axis values every two seconds, while the y-axis remains fixed to sepal length. Built with D3 v6, the example uses the `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to construct the plot and axes, and employs D3's `join` feature for efficient SVG element updates. Data is loaded from a remote CSV file and parsed into numerical values, rendered as SVG circles with the Share Tech font.

AABCDB15
94% match