Skip to main content
SimilarExport ZIP
100%

ICE-7 Fork of Reusable Scatter Plot

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

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.

AI-generated description

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

MIT Licensed

Similar vizzes

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…

ICE-7 Reusable scatter plot with different symbol

This example visualizes the Iris dataset as a scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. Each species is represented by a distinct symbol (circle, cross, diamond) and color, determined by an ordinal scale. The chart is implemented as a reusable D3 component using `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol`, with axes created via `d3.axisLeft` and `d3.axisBottom`. Data is loaded asynchronously with `d3.csv`, and the visualization renders as an SVG that fills the browser window.

Mmanishcheruku
94% match
Loading thumbnail…

ICE-7: Reusable Scatter Plot

This visualization shows a scatter plot of the classic Iris dataset, mapping petal width along the x-axis and sepal length along the y-axis. Each data point is rendered as a distinct SVG symbol (circle, square, or triangle) representing one of the three iris species. The implementation builds a reusable `scatterPlot` module that accepts configurable accessor functions for data values and symbols, using D3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` APIs. It loads the CSV data via `d3.csv` and populates an SVG canvas sized to the full browser window.

CChaitanya Galla
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…

ICE-7 reusable scatter plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal width to the x-axis and sepal length to the y-axis while encoding species through symbol shapes and colors (grey, coral, and aqua). The chart uses reusable D3.js components, including scaleLinear, scaleOrdinal, axisLeft, axisBottom, and the symbol generator, to render SVG marks. Data is loaded via d3.csv and parsed into numeric values before being passed to the customizable scatterPlot function.

CChathurya
94% match
Loading thumbnail…

ICE-7 Reusable Scatter Plot

This visualization displays the Iris dataset, plotting sepal length against petal width while distinguishing species through different SVG path symbols. The reusable scatter plot component, built with D3 v6, uses scaleLinear for axes, scaleOrdinal for symbol mapping, and d3.symbol to generate custom point shapes. The code demonstrates a functional chart factory pattern with setters for width, height, data, and margin, invoked via selection.call(). Iris data loads from a CSV file with type coercion applied to numeric columns.

CCHANDU BHARGAVI
94% 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 reusable scatter plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length and distinguishing species through colored symbols. Built with D3 v6, it uses reusable chart components via `scatterPlot()`, employing `scaleLinear` and `scaleOrdinal` for axes and color mapping. The SVG rendering includes axis labels and a legend-free design, with data loaded asynchronously from a CSV URL. The chart adapts to the viewport size, demonstrating a modular approach to building customizable visualizations with D3's selection and join methods.

Kkakumanusreya
93% match