Skip to main content
SimilarExport ZIP
100%

ICE-7 Reusable scatter

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

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 Resuable scatterplot

This reusable scatter plot visualizes the Iris dataset, mapping petal width against sepal length and encoding species with distinct D3 symbol shapes (circles, crosses, and diamonds). Built with the reusable chart pattern, the `scatterPlot()` function configures scales, axes, and symbol generators via chained accessor methods. The visualization renders as animated SVG, with axes created using `axisLeft` and `axisBottom`, while `scaleOrdinal` and `symbol` map categorical data to geometric marks. Data loads asynchronously via `d3.csv` and updates smoothly through D3’s data join.

SShridhar Kshirsagar
95% 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
95% 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
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 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
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…

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

ICE 7 Reusable D3 Scatter Plot

This reusable scatter plot, built with D3.js, visualizes the Iris dataset, mapping petal width to the x-axis and sepal length to the y-axis while encoding species with different symbols. The chart updates every 15 seconds, cycling through the four numeric columns for the x-axis. It uses a modular `scatterPlot` function with D3 scales, ordinal symbols, and axes, rendered as SVG, based on the "Towards Reusable Charts" pattern.

Mmanvithareddykarra
94% match