Skip to main content
SimilarExport ZIP
100%

D3 Scatter Plot

✓ Published1🌍 Public
Ddanheavern
Last edited May 8, 2022
Created on May 8, 2022
Forked from HTML Starter

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.

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 Scatterplot

This example visualizes the Iris dataset as an interactive scatterplot, mapping petal length to the x-axis, sepal length to the y-axis, and petal width to circle radius, with species indicated by color (blue, red, or black). It uses D3 v7’s `csv`, `scaleLinear`, `scaleSqrt`, `extent`, and `max` to load and scale the data, then renders SVG circles via a data join. Axis are drawn with `axisLeft` and `axisBottom`. The plot fills the browser window, and hovering reveals species and measurement details via tooltips.

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

d3 scatter plot

This example renders an interactive scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. Circles represent individual flowers, positioned using `d3.scaleLinear` for both axes, with margins and a fixed radius of 5 pixels. The visualization uses `d3.axisLeft` and `d3.axisBottom` to draw the y- and x-axes, and `d3.select` to append an SVG canvas that fills the browser window. Data is loaded asynchronously via `d3.csv` from a remote Gist URL.

GGorka Ribera
92% 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
92% 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
92% 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
92% match