Skip to main content
SimilarExport ZIP
100%

D3 Scatter Plot

✓ Published1🌍 Public
TTheo-0201
Last edited Sep 21, 2023
Created on Sep 21, 2023
Forked from HTML Starter

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.

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

d3 scatterplot

This example visualizes the classic Iris dataset as a scatterplot, mapping petal length to the x-axis and sepal length to the y-axis. It renders individual data points as SVG circles, with axes positioned along the left and bottom edges. The code uses d3.csv to load and parse the data, d3.scaleLinear for both scales, and d3.extent to compute the domains from the raw values. Axes are generated with d3.axisLeft and d3.axisBottom, while the chart fills the entire browser window by setting the SVG dimensions to the inner width and height.

Kktshim@snu.ac.kr
95% 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
95% match
Loading thumbnail…

D3 Scatter plot

This D3 scatter plot visualizes the classic Iris dataset using petal length along the x-axis and sepal length along the y-axis. The code loads data asynchronously from a CSV URL, converts numeric fields, and computes linear scales with `d3.scaleLinear`. It renders circles in an SVG container sized to the browser window, with axes drawn via `d3.axisLeft` and `d3.axisBottom`. The visualization demonstrates D3’s data-binding and layout pipeline for a simple multi-point chart.

SStuartSutherland
95% match
Loading thumbnail…

D3 Scatter Plot

This D3 example visualizes the classic Iris dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. It uses the `d3.csv` loader to fetch and parse the remote CSV, then applies `d3.scaleLinear` to construct axes and `d3.extent` to compute their domains. The SVG chart fills the browser window, with points rendered as circles via a data join (`selectAll` and `join`). Axis labels are omitted, but `axisLeft` and `axisBottom` draw the quantitative tick marks.

Pperez1932@hotmail.es
95% 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
95% match
Loading thumbnail…

D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It displays each data point as a circle in an SVG rendered at full window size. The code uses d3.csv to load the data, d3.scaleLinear with d3.extent for axes, and d3.axisLeft and d3.axisBottom to draw the scales.

Sshmouelsamares
95% match
Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the classic Iris dataset, plotting sepal length against petal length for each flower specimen. The visualization uses D3 v7 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data coordinates to SVG circle positions with a fixed radius of 5 pixels. Circles are rendered via SVG `<circle>` elements appended through D3's selection and join operations, with axes positioned using margin-based transforms. The chart fills the browser window, with data loaded asynchronously from a remote CSV file using `d3.csv`.

Aalexscott-untitled
95% match