Skip to main content
SimilarExport ZIP
100%

ICE-7 Reusable scatter plot with different symbol

✓ Published0🌍 Public
Mmanishcheruku
Last edited Mar 25, 2023
Created on Mar 25, 2023

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.

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

Kkarumanchimanasa
96% 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
96% 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
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

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 demonstrates a reusable scatter plot created with D3.js, visualizing the classic Iris dataset. It maps petal width and sepal length on the x- and y-axes, and uses different SVG symbols to represent the three iris species. The chart cycle through multiple data attributes every 15 seconds, updating the x-axis scale and re-rendering the marks. The implementation follows Mike Bostock’s reusable chart pattern, using accessor functions and D3’s `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `symbol` APIs.

Mmadanvemulapally
93% 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
93% 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
93% match