Reusable D3 Scatter Plot

100%

Reusable D3 Scatter Plot

✓ Published1🌍 Public

Last edited Feb 27, 2023

Created on Feb 27, 2023

This example presents a reusable scatter plot visualizing the Iris Dataset, mapping petal length to the x-axis and sepal length to the y-axis. It demonstrates a configurable D3 chart factory pattern, where the scatter plot function accepts chained setters for width, height, data, accessors, margins, and point radius. The code uses D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to render an SVG with circles and axes. The data loads from a GitHub Gist CSV file, and the visualization fills the entire browser window.

AI-generated description

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

MIT Licensed

Similar vizzes

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

96% match

Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a reusable D3.js scatter plot visualizing the Iris Dataset, with petal length mapped to the x-axis and sepal length to the y-axis. The implementation uses D3's `scaleLinear` for coordinate scaling, `extent` for domain calculation, and `axisLeft`/`axisBottom` for labeled axes. The code demonstrates a custom `scatterPlot` function that accepts configurable parameters like dimensions, margins, data, and value accessors, enabling flexible reuse across different datasets. The plot renders as an SVG with circles sized by a configurable radius parameter, and the dataset is loaded via D3's `csv` function from a remote source.

Jjmetzg11alpine

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

94% match

Loading thumbnail…

Reuseable D3 Scatter Plot

This reusable D3 scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It employs a functional, configurable design using d3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to automatically compute scales and render axes. The code loads CSV data via d3’s `csv` and draws SVG circles with a fixed radius, adapting to the browser window’s dimensions. The implementation showcases a modular chart-building pattern with settable properties for dimensions, data, and margins.

UUzoemeka Okechukwu Innocent

94% match

Loading thumbnail…

Reusable D3 Scatter Plot

A reusable scatter plot charts the Iris dataset, with petal width mapped to the x-axis and sepal length to the y-axis. Built with D3 v6, it demonstrates a modular chart factory pattern using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. SVG circles render the data points, with axes and margins configured via a fluent API. Every two seconds, the x-axis mapping cycles through different iris measurements, animating the plot's layout while preserving the same visual encoding.

OOleg Zhernovoy

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…

Reuseable D3 Scatter Plot

This example demonstrates a reusable scatter plot built with D3.js, visualizing the Iris dataset by mapping petal length to the x-axis and sepal length to the y-axis. The code uses `d3.csv` to load the data, `d3.scaleLinear` for both axes, and `d3.axisLeft` and `d3.axisBottom` to render the ticks and labels. Circles are drawn as SVG elements with dimensions that adapt to the full browser viewport, using the `d3.select` and `join` pattern for efficient data binding.

UUzoemeka Okechukwu Innocent

94% match

Loading thumbnail…

Reusable D3 Scatter Plot

This example demonstrates a reusable D3 scatter plot using the Iris dataset, visualizing petal length against sepal length with circular marks. The code, written by InnocentSky and rendered as SVG, uses `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for ticks, and a configurable `scatterPlot()` factory function that accepts setters for width, height, data, margin, and radius. Data is loaded asynchronously via `d3.csv`, with numeric parsing applied to all measurement columns. The plot fills the browser window and includes styled tick labels.

UUzoemeka Okechukwu Innocent

94% match