Skip to main content
SimilarExport ZIP
100%

ICE-7 Reusable scatter plot

✓ Published2🌍 Public
Mmadanvemulapally
Last edited Mar 13, 2023
Created on Mar 13, 2023

This example demonstrates a reusable scatter plot created with D3.js, visualizing the classic Iris dataset. It maps petal width and sepal length on the x- and y-axes, and uses different SVG symbols to represent the three iris species. The chart cycle through multiple data attributes every 15 seconds, updating the x-axis scale and re-rendering the marks. The implementation follows Mike Bostock’s reusable chart pattern, using accessor functions and D3’s `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `symbol` APIs.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7 - Reusable Scatter Plot

This example presents a reusable scatter plot visualizing the Iris Dataset, with data points colored by species. Built with D3.js v6, the plot cycles through different attribute pairs on the x-axis, including petal width, sepal width, petal length, and sepal length, updating the axes and circles each second. It uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to construct the chart, along with SVG elements for rendering and a fixed legend for species identification. The implementation follows a reusable chart pattern, allowing dynamic configuration of dimensions, margins, and value accessors.

Ssuchitra2602
94% match
Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot

This reusable scatter plot, built with D3.js, visualizes the Iris dataset, mapping petal width to the x-axis and sepal length to the y-axis while encoding species with different symbols. The chart updates every 15 seconds, cycling through the four numeric columns for the x-axis. It uses a modular `scatterPlot` function with D3 scales, ordinal symbols, and axes, rendered as SVG, based on the "Towards Reusable Charts" pattern.

Mmanvithareddykarra
93% match
Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, with points colored by species and rendered as different D3 symbols. The chart displays petal width on the x-axis and sepal length on the y-axis initially, then cycles through all four numeric columns every 15 seconds using `setInterval`. Built with D3 v3 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, `scaleOrdinal`, and `symbol`, the SVG visualization updates dynamically by calling the chart function again with new accessor functions.

TTejaswi@3271
93% match
Loading thumbnail…

ICE 7 Reusable scatter plot

This reusable scatter plot visualizes the Iris Dataset, mapping petal width, sepal width, petal length, and sepal length onto the x-axis while keeping sepal length on the y-axis. It uses D3’s `scaleLinear`, `scaleOrdinal`, and `symbol` to encode species with distinct SVG path shapes. The plot cycles through the four x-axis variables every two seconds via `setInterval`, re-calling the chart with updated accessors. Rendering is fully SVG-based, with axes generated by `axisLeft` and `axisBottom`, and the viewport resizes to the full window dimensions.

SSai Kaushik
93% match
Loading thumbnail…

ICE-7 Reusable scatter plot

This example shows the Iris dataset as an animated scatter plot of petal width against sepal length, cycling through different measurement columns every two seconds. Each point uses a distinct symbol from D3’s `symbol` generator based on species, with alternating green and gold fills, and axes labeled directly in the SVG. The visualization relies on a reusable `scatterPlot` function built with D3 scales (`scaleLinear`, `scaleOrdinal`), axis components (`axisLeft`, `axisBottom`), and a `setInterval` loop that updates the x-value mapping, re-rendering the chart via `svg.call(plot)`.

IIsabella Jaya Rani C
93% match
Loading thumbnail…

ICE-7 Reusable scatter plot with different symbol

This example uses D3.js to create a reusable scatter plot that visualizes the classic Iris dataset, encoding sepal length and petal width on the axes while different iris species are distinguished by both symbol type and color. The plot is rendered as an SVG canvas sized to the browser window, with axes labeled using D3's linear scale and axis functions. It leverages D3's ordinal scales to map species to a set of predefined symbols and a custom color palette, while the chart's dimensions, margins, and data mappings are configured through a configurable scatter plot component.

Mmanishcheruku
93% match
Loading thumbnail…

ICE-7 Reusable scatter plot with different symbol

This example presents a reusable D3.js scatter plot that visualizes the Iris dataset, encoding species type through both color and distinct symbols. The chart plots petal width against sepal length, with each data point rendered as an SVG path using `d3.symbol` for the shapes and `d3.scaleOrdinal` for color mapping. The code demonstrates a reusable chart pattern through a `scatterPlot` function that accepts configuration via getter-setter methods, applying `d3.scaleLinear` for axes and `d3.axisBottom` and `d3.axisLeft` for annotations.

CChandrashekharRamamuthi
93% match
Loading thumbnail…

ICE 7 Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, encoding petal width against sepal length with points colored and shaped by species. A reusable chart function built with d3.scaleLinear, d3.scaleOrdinal, and d3.symbol maps data to SVG paths, while d3.axisLeft and d3.axisBottom render axes. Every two seconds, the plot cycles through different numeric columns as the x-axis variable, updating the visualization via a setInterval callback that re-invokes the chart function with new accessor functions.

Kkakumanusreya
92% match