Skip to main content
SimilarExport ZIP
100%

D3 Scatterplot

✓ Published0🌍 Public
Kkathrynrbernard
Last edited Jan 20, 2023
Created on Jan 20, 2023
Forked from HTML Starter

This example visualizes the classic Iris dataset as a scatterplot, using D3 v7 to map sepal and petal measurements to x and y positions. It demonstrates the core D3 data-join pattern, binding CSV data from a GitHub gist to SVG circle elements via `d3.csv` and scale functions. The code initializes the visualization by loading the data, then relies on D3’s scales and axes to render the plot, with styling handled through inline CSS and JavaScript. A React starter variant is referenced in the README for framework integration.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Scatter Plot

This example presents the classic Iris dataset as a red circular scatter plot with axes, mapping petal length to the x-axis and sepal length to the y-axis. It uses D3 v7 to load the CSV data, apply `scaleLinear` scales derived from `extent`, and render SVG circles via a data join. Axes are generated with `axisLeft` and `axisBottom`. The visualization runs in a React framework context, though the visible code is vanilla JavaScript.

MMatovu Ronald
93% match
Loading thumbnail…

D3 Scatter Plot

This example visualizes the classic Iris dataset as a D3.js scatter plot, mapping sepal length on the y-axis and petal length on the x-axis. The chart renders as an SVG with circles positioned via linear scales, while axes are drawn using `d3.axisLeft` and `d3.axisBottom`. The code fetches CSV data asynchronously, parses numeric columns, and dynamically resizes the plot to the full window. It customizes tick label styling through CSS and uses a React starter environment.

TTheo-0201
93% 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
93% 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
92% match
Loading thumbnail…

D3 Scatter Plot

This example displays the classic Iris dataset as a scatter plot, with petal length on the x-axis and sepal length on the y-axis. It loads data from a GitHub Gist using `d3.csv` and parses numeric fields. The visualization is built with React and rendered as SVG, using `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to construct the axes and points. The plot is generated by a custom `scatterPlot` function that sets the width based on the window size, with margins and a fixed point radius of 5.

JJetlinZ
92% match
Loading thumbnail…

d3 and scatterplot

This example displays the classic Iris dataset as a scatterplot, plotting sepal width on the x-axis and sepal length on the y-axis. The code loads the data from a CSV URL and uses d3.csv to parse it, then constructs linear scales with d3.scaleLinear to map the data to screen coordinates. It renders circular marks via SVG circle elements and adds axes using d3.axisLeft and d3.axisBottom. The visualization is built with React, though the core charting logic relies entirely on D3 v7.

Pparag776
92% match
Loading thumbnail…

D3 Scatter Plot

This example displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. The visualization uses D3 v7’s `select`, `csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` APIs to load the data, compute scales, and render SVG circles and axes. The plot fills the browser window, with bold tick labels, and the code demonstrates a straightforward data-ink pipeline from CSV parsing to interactive-free SVG rendering.

WWaseem Medhat
92% match
Loading thumbnail…

D3 Scatterplot

This example shows a D3 scatterplot of the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. The SVG viewport fills the browser window, with circles representing individual data points and axis ticks styled at 18px. Built with React and d3.v7, the code loads the CSV via `d3.csv`, then uses `scaleLinear` for both axes, `axisLeft` and `axisBottom` to render tick marks, and a data join to append circles with tooltips showing coordinate values. The data comes from a GitHub-hosted CSV file.

Rrespingu
92% match