Skip to main content
SimilarExport ZIP
100%

ICE-7 Reusable scatter plot with different symbol

✓ Published1🌍 Public
Kkarumanchimanasa
Last edited Mar 12, 2023
Created on Mar 11, 2023

This example presents the classic Iris dataset as a scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. It uses different symbols and colors to distinguish the three iris species, making group separation immediately visible. Built with D3.js, the visualization leverages a reusable `scatterPlot` component that accepts configuration for data, scales, margins, and symbol mapping. The code imports specific D3 modules for linear and ordinal scales, axes, and symbol generation, rendering the final result as an SVG. The dataset is loaded from a remote CSV file.

AI-generated description

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

MIT Licensed

Similar vizzes

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

ICE-7 Reusable scatter plot with different symbol

This example uses D3.js to create a reusable scatter plot that visualizes the classic Iris dataset, encoding sepal length and petal width on the axes while different iris species are distinguished by both symbol type and color. The plot is rendered as an SVG canvas sized to the browser window, with axes labeled using D3's linear scale and axis functions. It leverages D3's ordinal scales to map species to a set of predefined symbols and a custom color palette, while the chart's dimensions, margins, and data mappings are configured through a configurable scatter plot component.

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

ICE-7 Reusable scatter

This reusable D3 scatter plot visualizes the Iris dataset, mapping petal width against sepal length with distinct symbol shapes for each species. Built with d3.scaleLinear, d3.scaleOrdinal, and d3.symbol, it encodes species categories through different symbol types. The chart renders as an SVG, filling the viewport, and includes axis labels via d3.axisLeft and d3.axisBottom. The implementation uses a custom scatterPlot function called with a fluent interface to set dimensions, margins, data accessors, and symbol size.

SShridhar Kshirsagar
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 example presents a reusable D3.js scatter plot that visualizes the Iris dataset, encoding species type through both color and distinct symbols. The chart plots petal width against sepal length, with each data point rendered as an SVG path using `d3.symbol` for the shapes and `d3.scaleOrdinal` for color mapping. The code demonstrates a reusable chart pattern through a `scatterPlot` function that accepts configuration via getter-setter methods, applying `d3.scaleLinear` for axes and `d3.axisBottom` and `d3.axisLeft` for annotations.

CChandrashekharRamamuthi
94% match