Skip to main content
SimilarExport ZIP
100%

Fork of ICE-7 Reusable scatter plot with different symbol

✓ Published11🌍 Public
PPrathyusha Jampala
Last edited Mar 13, 2023
Created on Mar 13, 2023

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.

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

ICE-7 - Reusable scatter plot with different symbol

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length and encoding species with different D3 symbols and colors. Built as a reusable D3 component, it uses `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` to render points, axes, and margins dynamically. The SVG output updates based on window size, with data loaded via `csv` and parsed before rendering.

Aav.dj.2000@gmail.com
94% 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
94% 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 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
94% match
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
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
94% 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
94% match