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

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.

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

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 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 Scatter Plot

A reusable scatter plot built with D3 v6 displays Iris flower measurements, mapping petal width against sepal length and coloring each point by species (white, red, or green). The `scatterPlot` function encapsulates scales, axes, and circle rendering using `scaleLinear`, `axisBottom`, and `axisLeft`. Data loads from a CSV via `d3.csv` and parses numeric fields. The view fills the browser window with an orange background, and the script cycles through four measurement columns as the x-value, though only the initial petal-width view renders visibly.

Ssudhamshu24
91% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot - ICE7

This scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis, with each of the three species distinguished by a unique SVG symbol. The code uses D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom`. Data is loaded asynchronously from a CSV via `d3.csv`, and the reusable `scatterPlot` module handles margin configuration and dynamic sizing to fill the browser window.

BBrian Gilmore
91% 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
91% match