Skip to main content
SimilarExport ZIP
100%

Reusable Scatter Plot

✓ Published0🌍 Public
FFande Workspace
Last edited Mar 28, 2023
Created on Mar 28, 2023
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable Scatter Plot

This example demonstrates a reusable scatter plot visualizing the Iris dataset, plotting petal length against sepal length. D3.js v7 fetches the CSV data asynchronously, and the code uses d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to map values to SVG circles. The rendering uses a full-window SVG canvas with fixed margins, and the scatter plot marks are drawn via chained d3.select and `.join('circle')` operations.

KKhanAzmat
94% match
Loading thumbnail…

Reusable scatter plot

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.

Yyaswanthsen
93% match
Loading thumbnail…

Reusable D3 Scatter Plot

This example demonstrates a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. The visualization uses D3 v7 APIs including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to load data, scale positions, and render axes. Circles of fixed radius are drawn as SVG elements with coordinates computed from the scaled values. The chart fills the browser window, with the data sourced from a GitHub Gist and rendering done entirely in SVG.

KKerim
93% match
Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a reusable scatter plot built with D3.js and React, displaying the Iris dataset with petal length on the x-axis and sepal length on the y-axis. The visualization is rendered as an SVG, with circles sized by a configurable radius and axes generated using D3’s `scaleLinear`, `axisBottom`, and `axisLeft`. A custom `scatterPlot()` function encapsulates the chart logic, allowing width, height, margins, and data accessors to be set via a fluent interface, demonstrating a modular approach to building interactive visualizations with D3 v7.

Ttverdone
93% match
Loading thumbnail…

Reusable d3 Scatter Plot

This reusable scatter plot displays the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis as SVG circles with a fixed radius. Built as a configurable function using d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom, it fetches CSV data via d3.csv and supports setters for width, height, margins, and value accessors. Applied to a full-window SVG through a D3 selection, the chart renders axes with styled tick text and updates dynamically when re-invoked with new parameters.

AAndrea Mignone
93% match
Loading thumbnail…

Reusable Scatter Plot

This example demonstrates a reusable scatter plot built with D3 v6, displaying Iris flower measurements with petal length on the x-axis and sepal length on the y-axis. The visualization loads CSV data from a GitHub repository and uses a custom `scatterPlot()` function that encapsulates scales, axes, and labels through a configurable API with methods like `.width()`, `.data()`, and `.xValue()`. The SVG rendering includes axis labels and animated circle elements, showing how D3's modular functions enable flexible, reusable chart components.

UUVarshaReddy
93% match
Loading thumbnail…

Reusable Scatter Plot

This example plots the classic Iris dataset with petal length on the x-axis and sepal length on the y-axis. The d3.v7 code loads the CSV, parses numeric fields, and uses `scaleLinear` with `extent` to map data to screen coordinates. Circles are bound to the data, with axes generated via `axisLeft` and `axisBottom` within a margin-defined layout. The chart fills the browser window, rendering all points as simple SVG circles with a fixed radius.

GGayan Priyadarshana
92% match
Loading thumbnail…

Reusable Scatterplot Example

This example demonstrates a reusable scatter plot built with D3.js, visualizing the classic Iris dataset. The chart renders as an SVG and plots sepal length against sepal width, with each of the 150 flowers represented by a circle. The visualization includes styled axes with custom fonts, and the code is structured as a reusable chart function that accepts data and accessor functions for x and y values, following the principles of the "Towards Reusable Charts" pattern. The design highlights flexibility in mapping data columns to visual channels while maintaining a clean, minimal aesthetic with a border around the SVG and Poiret One typography for axis labels.

CCurran Kelleher
92% match