Skip to main content
SimilarExport ZIP
100%

d3 scatter plot

✓ Published0🌍 Public
Rrwata97
Last edited Apr 21, 2023
Created on Apr 20, 2023
Forked from HTML Starter

This D3.js scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. Each flower instance is represented as a small circle, with axes labeled and scaled linearly using `d3.scaleLinear`. The code loads CSV data via `d3.csv`, maps values using `d3.extent` to determine the y-domain, and renders the SVG chart full-screen. The visualization uses D3 v6 within a React framework, drawing circles with `d3.select` and `d3.join` to manage the marks.

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 D3 scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. Each flower is rendered as a circle using SVG within a React framework. The code utilizes `d3.csv` to load and parse the data, `d3.scaleLinear` for axis scaling, and `d3.extent` to determine data domains. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, while the chart dynamically fills the browser window's dimensions.

EEzhil-Kalai
96% 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
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…

scatter plot

This scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. It uses d3.csv to load the data, d3.scaleLinear for scaling, and d3.axisLeft and d3.axisBottom for tick marks. The SVG circles are rendered pink, matching the chart’s background, with margins sized proportionally to the viewport. The code reads window dimensions and appends the chart directly to the body.

Jjmetzg11alpine
95% match
Loading thumbnail…

Scatter Plot with D3

This scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis for individual flowers. The visualization uses D3.js to load CSV data via `d3.csv`, create linear scales with `scaleLinear`, and render SVG circles as data points. Axes are generated using `axisBottom` and `axisLeft` and positioned within a margin-based layout. The chart fills the browser window through dynamically computed width and height, with the rendered SVG scaling to the viewport.

Aadventuresenglish.info@gmail.com
95% match
Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each flower is rendered as an SVG circle, with axes and titles added via `d3.select`, `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom`. The chart fills the browser window and uses custom fonts for tick labels and axis titles.

KKaustav Sen
95% match
Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the classic Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis for each flower sample. The visualization uses D3 v7's `csv` loader to fetch and parse the remote dataset, then applies `scaleLinear` and `extent` to compute the axis domains from the numeric columns. SVG circles are drawn using a data join, with axes generated via `axisLeft` and `axisBottom`. The chart is rendered in vanilla HTML and JavaScript, filling the browser viewport dynamically.

Ccharlieronchetti@gmail.com
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
95% match