Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Fork of ICE 7 Reusable D3 Scatter Plot

✓ Published0🌍 Public
PPujitha14challagulla
Last edited Jul 1, 2022
Created on Jul 1, 2022

This fork of a reusable scatter plot visualizes the Iris dataset, showing species as different symbols on axes that cycle through the dataset's four numeric columns every 15 seconds. Built with D3.js, it uses `scaleLinear` for axes, `scaleOrdinal` for symbol mapping, and `axisLeft`/`axisBottom` for ticks. The chart's reusable structure, defined via a `scatterPlot` function with configurable accessors, animates by repeatedly calling the plot with a new `xValue` inside `setInterval`.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE 7 Reusable D3 Scatter Plot

This visualization presents the Iris Dataset as an animated scatter plot, cycling through different variable pairings on the x-axis every 15 seconds while the y-axis remains fixed on sepal length. It uses D3 v6 modules including `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft`, rendering SVG paths with custom symbols via the `symbol` generator to distinguish species. The chart is built as a reusable function following the Towards Reusable Charts pattern, with axes and marks updating dynamically through `selection.join` and interval-driven re-calls.

PPujitha14challagulla
95% match
Loading thumbnail…

Fork of Fork of Fork of ICE 7 Reusable D3 Scatter Plot

This visualization presents the classic Iris dataset as an animated scatter plot, mapping flower measurements (petal width, sepal length, etc.) to Cartesian coordinates. The SVG rendering is built with the d3 library, using a custom `scatterPlot()` function that leverages `scaleLinear`, `scaleOrdinal`, and `symbol()` to draw distinct species markers. Every 15 seconds, the plot cycles its x-axis through the dataset’s numeric columns, dynamically re-scaling the axes. This reusable chart demonstrates how to create a flexible D3 module with setters and getters, allowing for interactive data exploration.

PPujitha14challagulla
95% match
Loading thumbnail…

Fork of Fork of Fork of Fork of ICE 7 Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, displaying petal width against sepal length using distinct D3 symbols for each species. The visualization, built with a reusable D3 v6 chart module, employs scales, axes, and ordinal symbol mapping via `d3.scaleOrdinal`. Every 15 seconds, the x-axis automatically cycles through different measurement columns, animating the data points to new positions while maintaining the species-based symbol encoding. The SVG rendering includes dynamic axis updates and custom typography from the Share Tech font.

PPujitha14challagulla
94% match
Loading thumbnail…

Fork of Fork of ICE 7 Reusable D3 Scatter Plot

This example presents a reusable D3 scatter plot that visualizes the Iris Dataset. The chart displays data points with different symbols corresponding to species, mapping petal width against sepal length. Axes are drawn using `axisLeft` and `axisBottom` from D3, with scales created by `scaleLinear` and symbol types generated by `symbol` and `symbols`. The visualization cycles through different data columns for the x-axis every 15 seconds, using `setInterval`, updating the plot dynamically while the page renders as an SVG.

NNaimisha-M
94% match
Loading thumbnail…

Fork of ICE 7 Reusable D3 Scatter Plot

This fork of the ICE 7 reusable D3 scatter plot visualizes the Iris dataset, rendering each flower as a symbol whose shape encodes species and position encodes petal width and sepal length. It uses D3 v6 modules including `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom` within a custom reusable chart function. The plot animates every 15 seconds by cycling the x-axis through four different numeric columns using `setInterval`, updating the scales and re-rendering the SVG dynamically.

NNaimisha-M
94% match
Loading thumbnail…

Fork of Fork of ICE 7-1 Reusable Scatter Plot

This example presents a reusable scatter plot of the Iris dataset, encoding species with distinct colors and shapes while mapping petal width and sepal length to the x and y axes. It cycles through four quantitative columns every ten seconds, updating the x-axis domain and point positions with animation. The visualization uses the D3 v6 module API, including `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `symbol` for shape encoding, with SVG rendering driven by a `setInterval` loop that re-invokes the chart function.

KKarnisrikanth
92% match
Loading thumbnail…

Fork of Fork of fork of iCE - 7 Reusable Scatter Plot

This example shows an animated scatter plot of the Iris dataset, cycling through different pairs of flower measurements every two seconds. Data points are colored by species (blue, red, yellow) and rendered as SVG circles with white strokes. The visualization uses D3 v6 modules including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to compute scales and draw axes, while a reusable `scatterPlot` function manages the chart configuration and updates. The code loads data from a CSV file hosted on GitHub and animates by changing the x-axis variable in a `setInterval` loop.

DDivyaVellanki
92% match
Loading thumbnail…

Fork of ICE 7 Reusable D3 Scatter Plot

This reusable scatter plot visualizes the Iris Dataset, showing relationships between four flower measurements across three species. Using D3.js version 6, the visualization encodes species with different symbol types via `scaleOrdinal` and `symbolGenerator`, while axes use `scaleLinear`, `axisLeft`, and `axisBottom`. The plot updates every 15 seconds, cycling through different x-axis attributes, and renders as an animated SVG.

RReyden Harris
92% match