Skip to main content
SimilarExport ZIP
100%

D3 Scatter Plot

✓ Published14🌍 Public
JJetlinZ
Last edited Jun 7, 2022
Created on May 30, 2022
Forked from Hello VizHub

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.

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

D3 Scatter Plot

This example uses D3.js to create a scatter plot of the Iris dataset, mapping petal width to the x-axis and sepal length to the y-axis. The visualization displays each flower as a circle with a fixed radius, scaled using D3’s `scaleLinear` and `extent` functions, with axes generated via `axisLeft` and `axisBottom`. Rendering is done with SVG elements inside a React component, and the data is loaded asynchronously from a CSV file using `csv` from D3. The code’s custom `scatterPlot` function uses a getter-setter pattern to configure width, height, margins, and value accessors.

Rroyable88
95% match
Loading thumbnail…

D3 Scatter Plot

This scatter plot visualizes the classic Iris dataset by mapping petal length to the x-axis and sepal length to the y-axis, using D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions. Circles are rendered as SVG elements with a fixed radius of 5 pixels, positioned via `cx` and `cy` attributes. The chart fills the browser window by setting width and height to `window.innerWidth` and `window.innerHeight`, with margins applied to the scales. The code fetches the data as CSV from a GitHub gist, parses numeric fields, and applies a data join with `selectAll` and `.join`.

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

D3 scatter plot

This example uses D3.js to create a scatter plot of the classic Iris dataset, loaded via a CSV file from a gist. It displays two measurements, petal length along the x-axis and sepal length along the y-axis, as small circles. The code leverages `d3.csv` for data loading and parsing, `d3.scaleLinear` for mapping data values to screen coordinates, and `d3.axisLeft` and `d3.axisBottom` to render the axes. The visualization is drawn as an SVG, sized to fill the browser window, with a fixed margin around the plot.

Ccyriltoneatto965
94% match