Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published2🌍 Public

Last edited Mar 30, 2023

Created on Mar 28, 2023

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length while color- and shape-encoding species. Built with reusable D3 chart patterns, it uses `scaleOrdinal` and `symbol` for categorical encoding. Every two seconds, the animation cycles the x-axis through different numeric columns. The chart renders as SVG with `axisLeft` and `axisBottom` scales, and a custom legend distinguishes Setosa, virginica, and versicolor.

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 interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length and using different symbols and colors to distinguish the three species. Built with a reusable D3 chart function, it employs `scaleLinear` for axes, `scaleOrdinal` for categorical symbol and color mappings, and SVG rendering. A legend identifies species, while an animation cycles through different x-axis variables every two seconds, dynamically updating the plot via the chart's accessor methods.

AAniv Chakravarty

95% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, mapping petal width against sepal length while coloring each dot by species (setosa, versicolor, and virginica). Built with D3 v3, it uses `d3.csv` to load data, `scaleLinear` for axes, and `setInterval` to cycle through different data columns every two seconds, updating the x-axis. The SVG rendering includes custom circle markers with varying dimensions and a rotating set of axis labels.

Bbhargavarathod

94% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot - 11641166

This interactive scatter plot displays the Iris dataset, mapping petal width against sepal length. A reusable chart component built with `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, and `d3.axisLeft` renders colored, shape-coded markers for the three species. The visualization animates every two seconds, cycling through all four numeric columns as the x-axis variable, updating the plot via the `scatterPlot` function's chained setters. The SVG output includes a title and a legend identifying species colors.

JJasvitha Allamsetty

94% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, using petal width and sepal length as the x and y axes, with points colored by species (setosa, versicolor, virginica). The visualization is built with D3 v6, using the `scaleLinear`, `scaleOrdinal`, and `axisBottom`/`axisLeft` APIs to render axes and a legend. A JavaScript `setInterval` cycles through four column pairings every two seconds, animating the plot to show different variable combinations while the SVG circles update smoothly. The data is loaded from a GitHub Gist CSV file and parsed into numeric fields.

SSheshidharreddy

94% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot explores the Iris dataset, cycling through different pairings of sepal and petal measurements every two seconds. It uses D3 v6's `scaleLinear`, `scaleOrdinal`, and axis components within a reusable `scatterPlot` function, rendering SVG circles with color-coded species. The visualization also includes a legend and a secondary set of static, elliptical marks, demonstrating data-driven attribute binding.

SSaiSreya1

93% 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

93% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, cycling through four attribute pairings every two seconds to reveal different relationships between sepal and petal measurements. Built with D3 v6, it uses d3.scaleLinear for axes, d3.scaleOrdinal for species color coding, and d3.axisLeft/axisBottom for ticks. SVG circles are rendered with CSS transitions, while a legend identifies the three iris species. The implementation follows the reusable chart pattern, with the scatterPlot function accepting configurable accessors for x, y, and radius values.

AAnanyaSamala

93% 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

93% match