Skip to main content
SimilarExport ZIP
100%

Mirek - D3 Scatter Plot

✓ Published0🌍 Public
MMirekBXL
Last edited Mar 24, 2023
Created on Mar 24, 2023
Forked from HTML Starter

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It uses the d3.csv loader to fetch data from a remote gist URL, then applies d3.scaleLinear with d3.extent to derive continuous scales for each axis. The plot is rendered as an SVG via d3.select and append, with circles positioned through data marks and axes drawn using d3.axisLeft and d3.axisBottom. The chart fills the entire browser window, with margins applied around the plot area.

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

D3 scatter plot

This example uses D3.js to create a scatter plot of the classic Iris dataset, loaded via a CSV file from a gist. It displays two measurements, petal length along the x-axis and sepal length along the y-axis, as small circles. The code leverages `d3.csv` for data loading and parsing, `d3.scaleLinear` for mapping data values to screen coordinates, and `d3.axisLeft` and `d3.axisBottom` to render the axes. The visualization is drawn as an SVG, sized to fill the browser window, with a fixed margin around the plot.

Ccyriltoneatto965
88% match
Loading thumbnail…

D3 Scatter Plot

This D3.js scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. The code loads CSV data from a remote Gist, converts string values to numbers, and uses `d3.scaleLinear` with `d3.extent` to map data domains to screen coordinates. Individual data points are rendered as SVG circles with tooltips showing their coordinates. Axis ticks are generated using `d3.axisLeft` and `d3.axisBottom`, with the chart filling the entire browser window.

GGullyPlook
88% 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
88% 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
88% 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
88% match