Skip to main content
SimilarExport ZIP
100%

D3 Partial Scatter Plot

✓ Published1🌍 Public
CCurran Kelleher
Last edited May 1, 2021
Created on May 1, 2021
Forked from HTML Starter

This example renders a scatter plot using D3 version 6 within a React-compatible setup, drawing circles with SVG. It loads the Iris dataset from a GitHub Gist, parses numeric fields, and maps petal length to the x-axis and sepal length to the y-axis using `d3.csv` and `d3.scaleLinear`. The code uses `d3.extent` for domain calculation and `d3.select` to append and join circle elements, with each point positioned via scaled coordinates.

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 Partial Scatter Plot (Vanilla JS)

This example displays a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis using D3 v6. It fetches the CSV from a GitHub Gist, parses the numeric fields, and creates SVG circles with pixel-based coordinates scaled from the data extents. The visualization fills the browser window, using D3’s `scaleLinear`, `extent`, `csv`, and `select` APIs to handle scaling, data loading, and DOM manipulation.

AAndrea Mignone
93% match
Loading thumbnail…

Partial Scatter Plot with D3

This example shows a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis using D3 v7. The code loads CSV data via `d3.csv`, applies linear scales with `scaleLinear` based on `extent` of the data, and renders circles as SVG elements. It computes pixel coordinates for each data point and joins them to the DOM using `selectAll` and `join`. The visualization fills the entire browser window, with the SVG sized to `window.innerWidth` and `window.innerHeight`.

Aadventuresenglish.info@gmail.com
91% match
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
90% match
Loading thumbnail…

D3 Scatter Plot

This example uses D3 v7 to render an interactive scatter plot of the Iris dataset, loaded via `d3.csv` from a GitHub gist. The visualization maps petal length on the x-axis and sepal length on the y-axis using `scaleLinear` and `extent`, with points colored by species via `scaleOrdinal` and `schemeCategory10`. SVG circles are bound to data with `join`, and each carries a `<title>` tooltip. Hovering triggers a CSS transition that enlarges the circle’s radius, while `axisLeft` and `axisBottom` add labeled axes.

Ddanheavern
90% 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
89% 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
89% match
Loading thumbnail…

D3 Plot with React

This example visualizes the Iris dataset as a scatter plot of petal length against sepal width, with each flower represented by a circle. It uses React to render SVG elements, while d3-scale’s `scaleLinear` computes the x and y positions and d3-array’s `extent` sets the domains. Custom React components (AxisBottom, AxisLeft, Marks) generate ticks and circles. Data loads asynchronously via d3-fetch’s `csv` from a GitHub gist. The chart includes rotated and positioned axis labels, and hover tooltips using SVG `<title>` elements.

WWasanta Pruttisarikorn
89% match
Loading thumbnail…

D3 + React

This example shows a scatterplot of the classic Iris dataset, plotting sepal length against petal length. It uses React for component structure and state management, while D3 modules handle the data-driven visualization: `d3.csv` loads the data, `d3.scaleLinear` and `d3.extent` set the scales, and `d3.axisLeft`/`d3.axisBottom` draw the axes. The SVG circles are rendered via D3 selections within a React effect, bridging the two libraries.

SSubhendu Karmakar
89% match