Skip to main content
SimilarExport ZIP
100%

D3 Scatterplot

✓ Published1🌍 Public
Rrespingu
Last edited Oct 5, 2022
Created on Oct 4, 2022
Forked from HTML Starter

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.

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 shows a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. The visualization renders circles as marks in an SVG, with scales defined using `scaleLinear` and axes created via `axisLeft` and `axisBottom`. Data is loaded asynchronously from a CSV URL using `d3.csv`, with numeric fields parsed through a custom row function. The chart fills the browser window, with margins applied to position the axes and plot area.

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

D3 Scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length against sepal length for individual flowers. Built with D3 v7 and React, the visualization uses SVG circles and linear scales to map data values to screen coordinates, with axes generated by d3.axisLeft and d3.axisBottom. The code loads CSV data asynchronously via d3.csv, parses numeric fields, and renders points with a steelblue fill. Axis tick labels are styled with a large Courier New font, and the chart fills the browser window dynamically.

Nnicolekevans
95% match
Loading thumbnail…

D3 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. Each flower is represented by a circle, with positions scaled linearly using d3.scaleLinear and extents from the data. The visualization renders in SVG, drawing circles directly onto an appended svg element. Axes are generated with d3.axisLeft and d3.axisBottom, styled with a 20px font size for tick labels. Data is loaded asynchronously using d3.csv from a remote Gist URL, with numeric parsing applied to all four measurement columns.

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

D3 Scatter Plot

This example visualizes the Iris flower dataset as a scatter plot, mapping petal length to the horizontal axis and sepal length to the vertical axis. Each flower is rendered as a circle in an SVG canvas. The code loads CSV data using `d3.csv`, parses numeric fields, and applies linear scales via `d3.scaleLinear` with domains derived from `d3.extent`. Circles are joined to the data with `selectAll().data().join()`, sized with a fixed radius of 5 pixels, and positioned using the scaled coordinates.

Ttrongan765@gmail.com
94% 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
94% match