Skip to main content
SimilarExport ZIP
100%

Scatter Plot

✓ Published0🌍 Public
JJulia Huang
Last edited Apr 11, 2023
Created on Apr 11, 2023

This scatter plot displays the relationship between petal length and petal width, with points colored by iris species. Built with Observable Plot and D3 v7, the example loads CSV data via `d3.csv` and `autoType`, then renders a full-window plot using Plot’s `plot` and `dot` marks. The chart updates to fill the browser viewport by setting width and height to `window.innerWidth` and `window.innerHeight`.

AI-generated description

Minimal example demonstrating use of Observable Plot with vanilla HTML.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, showing petal length against petal width, with points colored by species (setosa, versicolor, and virginica). The plot displays 150 data points from the CSV source, loaded via `d3.csv`. The code uses D3 v6 APIs such as `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to build the SVG visualization. Axis labels indicate the measured attributes, while point positions are derived from parsed numeric fields for petal and sepal dimensions.

Tteohangxanh
89% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The visualization uses D3 v7 with the `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` APIs to load and render the data as SVG circles. Axis labels indicate "Petal Length" and "Sepal Length," though the latter appears mislabeled relative to the plotted variables. The chart fills the browser window with margins and styled tick text.

Ffloraho401
89% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, showing petal length and width, with points colored by species. The visualization uses D3 v6 to load CSV data from a GitHub gist, scale the axes linearly, and render circles as SVG marks. The plot includes axis labels for petal and sepal measurements, with a supplementary legend indicating the three Iris species.

Cchsaisriharsha@gmail.com
88% match
Loading thumbnail…

scatter plot

This scatter plot visualizes the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. Each flower is rendered as a circle using D3 v7’s `select`, `scaleLinear`, `csv`, and `extent` functions, with axes drawn via `axisLeft` and `axisBottom`. The SVG output fills the browser window, with data loaded from a remote CSV file and parsed into numeric fields before plotting.

Ddwikbtn
87% match
Loading thumbnail…

Scatter Plot Using Iris Data

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each point colored by species (green, purple, or red). It uses d3.csv to load the data, d3.scaleLinear for axes, and d3.axisLeft and d3.axisBottom to render the scales. Circles are drawn as SVG elements via a data join, with labels for the axes in red and purple. The plot is rendered in vanilla HTML.

MMeghanaArepalli
87% match
Loading thumbnail…

scatter-plot

This example visualizes the classic Iris Dataset, plotting petal width against petal length for 150 individual flowers. The scatter plot uses `d3.scaleLinear` to map data extents to screen coordinates, with circles colored by a random HSL hue at partial opacity. The code loads the CSV file via `fetch` and parses it with `csvParse`, then renders the visualization using D3 v7 selection joins. Custom axes are created with `d3.axisLeft` and `d3.axisBottom`, with white labels for petal-length and petal-width.

Oownerofthesoul0000@gmail.com
87% match
Loading thumbnail…

Data Visualization Scatter Plot Graph

This scatter plot visualizes the Iris dataset, plotting petal length against petal width for individual flowers. Each point is colored by species—violet for setosa, orange for versicolor, and blue for virginica—using an SVG rendered via D3 v6. The visualization loads data from a CSV file and uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to construct the chart, with axis labels provided for the petal measurements. The plot is dynamically sized to the browser window.

Ssuchitra2602
87% match
Loading thumbnail…

D3 Scatter PLot

This scatter plot visualizes the Iris dataset, showing petal length against petal width. Points are colored by species—red for virginica, blue for setosa, and green for versicolor—with tooltips revealing exact values and species names. The visualization uses D3 v7 APIs including `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` within an SVG rendered via React. Axes are positioned using margin offsets, and the plot fills the browser window.

Sserebryanaya.n@gmail.com
87% match