Skip to main content
SimilarExport ZIP
100%

d3 scatter plot

✓ Published1🌍 Public
FFrancisco Ibelles
Last edited Feb 16, 2024
Created on Feb 14, 2024
Forked from HTML Starter

This example visualizes the classic Iris dataset as a scatter plot, comparing petal length on the x-axis with sepal length on the y-axis for 150 flowers. The visualization uses D3 v7 with vanilla JavaScript to load the CSV data via `d3.csv`, parse the numeric fields, and render SVG circles positioned through `d3.scaleLinear` scales. Axes are drawn using `d3.axisLeft` and `d3.axisBottom`, while the chart fills the entire browser viewport with margins applied around the plot area.

AI-generated description

create a scatter plot with D3 and vanilla javascript

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Scatter Plot

This example visualizes the classic Iris dataset as a scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. Circles represent individual flowers, with axes labeled via D3’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs. The code loads CSV data using `d3.csv`, parses numerical fields, and renders the plot as SVG circles sized with a fixed radius. The visualization fills the browser window, using viewport dimensions for the chart’s width and height, and demonstrates a straightforward data-joining workflow with `selectAll` and `join`.

Lliu yang
95% match
Loading thumbnail…

scatter plot

This scatter plot visualizes the classic Iris Dataset, plotting sepal length against petal length for 150 flowers. The visualization uses a D3 v7 SVG rendering pipeline with `d3.csvParse` to load and type-convert the CSV data, `d3.scaleLinear` for x and y scales, and a custom `scatterPlot` function that renders circles with fixed radius. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, with separate labeled axis text elements. The chart fills the viewport and automatically loads the dataset on initialization.

KKhatera Alizada
94% 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
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
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 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
94% 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
93% 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. Using D3 v6, it loads data via `d3.csv`, applies linear scales with `scaleLinear` and `extent`, and renders circles as marks. Axes are drawn with `axisBottom` and `axisLeft` in an SVG container. The plot fills the entire window and displays all 150 samples without color or categorical encoding.

CCurran Kelleher
93% match