Reusable Scatterplot Example

100%

Reusable Scatterplot Example

✓ Published0🌍 Public

Last edited Jun 30, 2022

Created on Jun 30, 2022

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.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Reusable Charts

This example demonstrates a reusable scatterplot component built with D3.js, visualizing the classic Iris flower dataset. It plots sepal length against petal length, with each flower represented by a circle of fixed radius. The visualization includes axes, axis labels, and a title, using D3’s scaleLinear, axisLeft, axisBottom, and csv data loading. The code implements a configurable chart function with a fluent API for setting width, height, data, value accessors, margins, and radius, highlighting the reusable pattern.

Aalexscott-untitled

91% match

Loading thumbnail…

Reusable D3 Scatterplot

This example demonstrates a reusable D3.js scatterplot that visualizes the Iris dataset, plotting petal width against sepal length. The chart uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and SVG circles for data points. The code implements a modular, configurable scatterPlot function with settable properties for width, height, data, margins, and radius, allowing the same visualization to be easily reused with different datasets or configurations. The rendering is fully SVG-based and fills the browser window.

Aajoua

91% 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

91% 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

91% 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

91% match

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

91% match