Skip to main content
SimilarExport ZIP
100%

D3 Scatterplot Black and White Template

✓ Published4🌍 Public
AAndre J Denais
Last edited May 6, 2021
Created on May 4, 2021

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.

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
94% match
Loading thumbnail…

The Basic Reusable D3 Scatterplot Black and White

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.

AAndre J Denais
91% match
Loading thumbnail…

D3 Scatter Plot

This example renders the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v7 to load the CSV data via `d3.csv`, and then builds scales with `d3.scaleLinear` and `extent` to compute domains. Circles are drawn as SVG elements, with axes generated through `d3.axisLeft` and `d3.axisBottom`. The visualization adapts to the full browser window and includes a large font size for tick labels via CSS.

SSubhendu Karmakar
90% match
Loading thumbnail…

D3 Scatter Plot

This example visualizes the classic Iris dataset as a scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. Circles represent individual flowers, with axes labeled via D3’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs. The code loads CSV data using `d3.csv`, parses numerical fields, and renders the plot as SVG circles sized with a fixed radius. The visualization fills the browser window, using viewport dimensions for the chart’s width and height, and demonstrates a straightforward data-joining workflow with `selectAll` and `join`.

Lliu yang
89% match
Loading thumbnail…

D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. Using D3 v6, it loads data via `d3.csv`, applies linear scales with `scaleLinear` and `extent`, and renders circles as marks. Axes are drawn with `axisBottom` and `axisLeft` in an SVG container. The plot fills the entire window and displays all 150 samples without color or categorical encoding.

CCurran Kelleher
89% match
Loading thumbnail…

D3 Scatterplot

This example displays the classic Iris dataset as an SVG scatterplot, plotting petal width against sepal length. The visualization uses D3’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data values to pixel coordinates and render labeled axes. Data is loaded asynchronously with `csv()` and parsed to numeric fields. Circles are drawn using D3’s `selectAll().data().join()` pattern, with the plot sized to fill the browser window.

MMatthew Bruffey
89% match
Loading thumbnail…

D3 Scatter Plot Annotated

This example renders the classic Iris flower dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis using D3 scales and SVG circles. It loads the CSV with `d3.csv`, parses numeric fields, and draws axes with `d3.axisLeft` and `d3.axisBottom`. The visualization fills the browser window, with tick labels styled to a larger font size for readability.

CCurran Kelleher
89% match
Loading thumbnail…

D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis using circular marks. The code loads CSV data via `d3.csv`, scales it with `scaleLinear` and `extent`, and renders the points as SVG circles. Axes are generated with `axisLeft` and `axisBottom`, with the visualization sized to the full browser window. The example uses D3 v7 within a minimal HTML page, styling tick text via CSS.

KKhanin Sisaengsuwanchai
89% match