Fork of Fork of ICE-7 Reusable scatter plot with different symbol

100%

Fork of Fork of ICE-7 Reusable scatter plot with different symbol

✓ Published1🌍 Public

Last edited Mar 25, 2023

Created on Mar 25, 2023

Forked from Fork of ICE-7 Reusable scatter plot with different symbol

This visualization displays the Iris dataset as a scatter plot. It shows the relationship between petal width and sepal length, with each of the three iris species represented by a distinct color and symbol. The plot uses D3's `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom` functions to map data values to visual properties. The `scatterPlot` function is a reusable component, configured via a fluid interface, and renders as an SVG.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE-7 Reusable scatter plot with different symbol

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length. Each data point is rendered as a distinct symbol, with colors corresponding to the species of iris. The plot, implemented with D3.js, uses ordinal scales for symbols and colors, linear scales for axes, and SVG paths for marks. Data is loaded from a CSV file hosted as a GitHub gist.

Ssivamani

96% match

Loading thumbnail…

Fork of Fork of ICE-7 Reusable scatter plot with different symbol

A D3 scatter plot visualizes the Iris dataset, mapping petal width against sepal length. Data points use different symbols and colors (yellow, aqua, red) to distinguish iris species. The reusable `scatterPlot` component builds linear scales, ordinal symbol and color scales, and renders SVG paths with an axis. It loads CSV data via `d3.csv` and parses numeric fields, with the plot sized to the full window.

Ssivamani

95% match

Loading thumbnail…

Fork of ICE-7 Reusable scatter plot with different symbol

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length for three species using distinct D3 symbols and colors. Built as a reusable component, it leverages `scaleLinear` for axes, `scaleOrdinal` for symbol and color mapping, and `symbol` generators to render SVG paths. The chart updates to fill the window, with axes drawn via `axisBottom` and `axisLeft`. Data loads from a CSV URL and is parsed with numeric coercion, demonstrating D3’s data-joining workflow with `.join()` and configuration via getter-setter methods.

PPrathyusha Jampala

95% match

Loading thumbnail…

Fork of ICE 7 Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length, with each species represented by a distinct SVG symbol. Built as a reusable chart module using D3 v6, it employs `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` for positioning and symbol encoding. The axes and points update dynamically every 15 seconds as the x-axis cycles through four measurement columns. The visualization uses an SVG rendering approach with animated transitions between attribute mappings.

Bbindhureddy98

94% match

Loading thumbnail…

Fork of ICE 7 Reusable D3 Scatter Plot

This example presents an interactive scatter plot of the Iris dataset, where each flower species is represented by a distinct symbol from d3.symbol. The plot visualizes sepal length against petal width, with axes generated using d3.axisLeft and d3.axisBottom. A d3.scaleOrdinal maps species to symbol types, while d3.scaleLinear handles the x and y scales. Every 15 seconds, the x-axis dynamically switches between four numeric attributes—petal width, sepal width, petal length, and sepal length—using setInterval to re-render the chart with updated scales and positions.

Mmanvithareddykarra

93% match

Loading thumbnail…

ICE-7 Fork of Reusable Scatter Plot

This example visualizes the Iris Dataset as an interactive scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. It uses three distinct D3 symbol shapes to differentiate iris species, rendering each data point as an SVG path element. The implementation leverages reusable D3 modules including `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `symbols`, and `symbol`, with data loaded asynchronously via `csv`. The chart fills the entire browser window, with axes labeled and styled through CSS.

IIndhuKrishnaraj

93% match

Loading thumbnail…

Fork of ICE 7 Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width and sepal length on the axes while using different symbols to represent each flower species. The visualization automatically cycles through four data columns every 15 seconds, updating the x-axis to explore different variable relationships. Built with D3.js version 6.7.0, it leverages `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `symbols`, and `symbol` APIs to create an SVG chart with animated transitions. The reusable chart component demonstrates a modular approach to data visualization.

Ttejasviprasad06@gmail.com

93% match

Loading thumbnail…

Fork of ICE - 7 - Reusable Scatter Plot

This example presents a reusable scatter plot of the Iris dataset, visualizing relationships between sepal and petal dimensions. Each point is colored by species (setosa, versicolor, virginica) and uses a distinct symbol shape via d3.symbol and scaleOrdinal. The plot cycles through different X-axis variables every five seconds using setInterval, re-calling the scatterPlot function. Built with d3.scaleLinear, axisLeft, and axisBottom, the visualization renders as animated SVG paths and includes an on-page legend.

NNitheeshSama

93% match