Reusable scatter plot

100%

Reusable scatter plot

✓ Published0🌍 Public

Last edited Mar 10, 2023

Created on Mar 10, 2023

This example demonstrates a reusable scatter plot component built with D3.js, visualizing the Iris dataset. The plot maps petal width to the x-axis and sepal length to the y-axis, with species encoded through distinct SVG symbols. The implementation uses D3's `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `symbol`, and the `join` operator to create a flexible, configurable chart. The iris data is loaded from a CSV file, and the SVG rendering adapts to the full browser window dimensions.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable scatter plot

This example shows a reusable scatter plot of the Iris dataset, encoding petal width on the x-axis, sepal length on the y-axis, and species as symbol shapes. Built with D3.js, it uses a custom `scatterPlot` function that takes data, value accessors, and margin configuration, then renders SVG paths via the `symbol` and `symbols` APIs. It also applies `scaleLinear` for axes, `scaleOrdinal` for categorical mapping, and `axisLeft`/`axisBottom` for tick marks, with data parsed from a CSV URL.

KKiran Jyothi Bodduluri-11604571

95% match

Loading thumbnail…

Reusable scatterplot

This example demonstrates a reusable scatterplot component built with D3.js, visualizing the classic Iris dataset loaded from a CSV file. The chart plots petal length and width measurements as circles, with axes generated using D3's scaleLinear and axisLeft/axisBottom functions. The scatterPlot function exposes configurable setters for width, height, data, margins, and radius, allowing the chart to be adapted and reused. The visualization renders as SVG, sized to fill the browser window.

GGeorgi Dimitrov

94% match

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot displays the Iris Dataset, plotting petal length against sepal length. The implementation uses a custom `scatterplot` function that takes configurable parameters for data, dimensions, margins, and point radius. It employs D3's `scaleLinear` for axis scaling, `scaleOrdinal` for symbol mapping, and `axisLeft`/`axisBottom` for rendering axes. The SVG visualization is generated declaratively with data-driven circles, and the code demonstrates a modular approach for creating reusable chart components with D3 7.6.1.

Yyankesswang

94% match

Loading thumbnail…

Reuse

A D3 scatter plot visualizes the Iris Dataset, mapping petal width to sepal length and using distinct symbols for each species. The SVG rendering populates a full-window plot with axes and a bold title, while the code modularizes the chart via a reusable `scatterPlot` function. It leverages `d3.csv` for data loading, `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom` APIs, with a light blue background styling.

Yyasmeenha

94% match

Loading thumbnail…

Reusable scatter plot with different symbols

This example presents the classic Iris Dataset as an interactive scatter plot rendered with SVG. It maps petal length to the x-axis and sepal width to the y-axis, using distinct symbols and colors (yellow, orange, navy) to differentiate the three iris species. Built with D3 v6, the code defines a reusable `scatterPlot` component that leverages `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisBottom`/`axisLeft` to generate the chart. The visualization resizes to the full browser window and parses the CSV data via `d3.csv`.

SSUSHMA CHIRRA

93% match

Loading thumbnail…

Reusable scatter plot with different symbols

This example visualizes the Iris Dataset, mapping petal width to the x-axis and sepal length to the y-axis. Each data point is rendered as a distinct symbol from D3’s `symbols` set, with the species of iris determining which symbol shape is used. The visualization is built as a reusable D3 component using `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol().size(100)` to generate the scatter plot’s marks. The `scatterPlot` function is configured with margin, size, and accessor functions, while the SVG rendering fills the browser viewport.

Vvamshisoletii

93% match

Loading thumbnail…

Reusable Scatter Plot

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, plotting sepal length against petal length for each flower variety. The chart uses D3.js v7 with SVG rendering to display circles representing individual data points, with axes scaled linearly from zero to the maximum attribute values. The implementation defines a reusable `scatterplot()` function that accepts a selector, data, and two attribute names, enabling the same visualization logic to be applied to different data fields. The JavaScript code leverages `d3.csv()` for data loading, `d3.scaleLinear()` for coordinate mapping, and D3 axis generators to create the chart.

FFande Workspace

93% match

Loading thumbnail…

Reusable Scatterplot Example

This example presents a reusable scatterplot component built with D3.js (v3 via CDN) and rendered as SVG. It visualizes the classic Iris dataset, mapping sepal length to the x-axis, petal length to the y-axis, and sepal width to the radius of each circle, while species determines color. The chart is configured through a chainable API (e.g., `.outerWidth()`, `.xAxisLabel()`, `.rMax()`), demonstrating how to load D3 from UNPKG, import local ES6 modules, and implement a modular, reusable visualization with custom axes, scales, and labels.

NNaveed945

93% match