Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Ssivamani
Last edited Mar 13, 2023
Created on Mar 13, 2023

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.

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 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.

Mmanishcheruku
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
94% match
Loading thumbnail…

Fork of ICE-7 Reusable scatter plot with different symbol

This fork of the ICE-7 reusable scatter plot visualizes the Iris dataset, mapping petal width against sepal length to reveal species clusters. It uses d3’s `scaleOrdinal` to assign distinct symbol shapes and colors (black, grey, pink) for each iris species. The code builds the chart with `scaleLinear`, `axisLeft`, and `axisBottom`, while `symbolGenerator` generates the mark paths. Data loads via a CSV URL, and the SVG renders with window-sized dimensions and custom margins, showing setosa, versicolor, and virginica points.

NNeeharikaGali
93% 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
92% 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
92% 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
92% match
Loading thumbnail…

Fork of Fork of ICE 7-1 Reusable Scatter Plot

This example shows the Iris Dataset as a scatter plot of petal width against sepal length, with each of the three species distinguished by color and a unique symbol shape. The chart uses d3.scaleLinear for axes, d3.scaleOrdinal for mapping species to colors and shapes from d3.symbol, and d3.axisBottom and d3.axisLeft for ticks. Every ten seconds, the x-axis variable cycles through four measurements, animating the plot via a setInterval that updates the scatter plot’s xValue accessor and re-renders the SVG.

KKarnisrikanth
92% match