The Basic Reusable D3 Scatterplot Black and White

100%

The Basic Reusable D3 Scatterplot Black and White

✓ Published1🌍 Public

Last edited Sep 2, 2021

Created on Aug 27, 2021

Forked from D3 Scatterplot Black and White Template

This example presents a reusable D3.js scatter plot visualization of the classic Iris dataset, mapping petal length against sepal length. The SVG-based chart uses `d3.scaleLinear` for axis scaling, `d3.axisLeft` and `d3.axisBottom` for axes, and a custom `scatterPlot` module that encapsulates the rendering logic. Data is loaded from a remote CSV file via `d3.csv`, with numeric parsing applied to each column. The visualization demonstrates a black-and-white aesthetic with configurable dimensions, margins, and point radius, making it adaptable for various datasets, though it is specifically illustrated with flower measurements.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Scatterplot Black and White Basic

This example visualizes the Iris dataset as a black-and-white scatterplot, mapping petal length to the x-axis and sepal length to the y-axis. The code uses D3 version 6 APIs including `csv` for data loading, `scaleLinear` and `extent` for scaling, and `select` for DOM manipulation. It renders points as SVG circles with a radius of 5 pixels, sized to fill the browser window. The plot’s minimal styling relies on default black circles against a white background.

AAndre J Denais

92% match

Loading thumbnail…

D3 Scatterplot Black and White Template

This example renders the Iris dataset as a black-and-white SVG scatterplot, mapping petal length to the x-axis and sepal length to the y-axis. It loads the CSV via `d3.csv`, parses numeric columns, and uses `scaleLinear` with `extent` for domains. Circles are drawn through `selectAll(...).join('circle')`, while `axisLeft` and `axisBottom` generate the axes. The visualization fills the full browser window, with margins and a fixed radius of 5 pixels for each point.

AAndre J Denais

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

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

90% match

Loading thumbnail…

Reusable D3 Scatter Plot

This scatter plot visualizes the Iris flower dataset, mapping petal length against sepal length. The D3.js code loads the data via `d3.csv` from a Gist URL, then uses a custom `scatterPlot` function. The chart creates a reusable component with settable `width` and `height` properties, rendered as SVG circles. Linear scales via `d3.scaleLinear` position the marks, while `d3.axisLeft` and `d3.axisBottom` add labeled axes with a margin-based layout, all drawn within a full-window SVG.

AAaron

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

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

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

89% match