Skip to main content
SimilarExport ZIP
100%

d3 scatter plot

✓ Published0🌍 Public
GGorka Ribera
Last edited May 17, 2024
Created on May 17, 2024

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.

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
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 example displays the classic Iris dataset as an interactive scatter plot, mapping petal length on the x-axis and sepal length on the y-axis to reveal patterns across the flower samples. The visualization uses D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs to construct axes and render circles in SVG, with data loaded asynchronously via `d3.csv` from a GitHub gist. The plot fills the entire browser window, using a simple margin-based layout and a fixed point radius to represent each data point.

AAaron
94% 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. 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.

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

D3 Scatter plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. Each flower is rendered as a small circle using SVG. The code fetches the CSV data via D3’s `csv` function, parses numeric fields, and creates linear scales with `scaleLinear` and `extent` to set the domains. Axes are drawn with `axisLeft` and `axisBottom`, and all rendering is handled through D3 selections within a React-free HTML page.

GGbemiga Atolagbe
94% match
Loading thumbnail…

D3 Scatter Plot

This example uses D3.js to create a scatter plot of the Iris dataset, mapping petal width to the x-axis and sepal length to the y-axis. The visualization displays each flower as a circle with a fixed radius, scaled using D3’s `scaleLinear` and `extent` functions, with axes generated via `axisLeft` and `axisBottom`. Rendering is done with SVG elements inside a React component, and the data is loaded asynchronously from a CSV file using `csv` from D3. The code’s custom `scatterPlot` function uses a getter-setter pattern to configure width, height, margins, and value accessors.

Rroyable88
94% 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
94% match