Fork of observer plot

100%

Fork of observer plot

✓ Published0🌍 Public

Last edited Jul 3, 2022

Created on Jul 3, 2022

This example displays the Iris dataset as a scatter plot, mapping petal length to the x-axis and petal width to the y-axis, with each species colored distinctly via the stroke channel. Built with Observable Plot’s `plot` and `dot` marks, the visualization uses `d3.csv` and `d3.autoType` to load and parse the remote CSV file. The chart is rendered directly into the document body, sized to fill the entire browser window on load.

AI-generated description

Minimal example demonstrating use of Observable Plot with vanilla HTML.

MIT Licensed

Similar vizzes

Loading thumbnail…

observer plot

This example uses Observable Plot to create a scatterplot of iris flower measurements, mapping petal length on the x-axis and petal width on the y-axis, with points colored by species. The dataset is loaded as CSV via `d3.csv` and `autoType`, then rendered using the `plot` and `dot` functions from the Plot library. The visualization fills the entire browser window by setting the width and height to `window.innerWidth` and `window.innerHeight`. The chart is appended directly to the document body, demonstrating a minimal integration of Plot with vanilla HTML and D3 v7.

SSamanvitha1

91% match

Loading thumbnail…

Fork of Hello Observable Plot

This example renders the classic Iris dataset as a scatter plot using Observable Plot, with petal length on the x-axis, petal width on the y-axis, and species encoded by stroke color. The visualization fills the entire browser window by setting the plot’s width and height to the inner dimensions of the viewport. The code loads data with `d3.csv` and `autoType`, then builds the chart with the `plot` and `dot` functions from the Observable Plot UMD bundle, while relying on D3 v6 for data parsing.

Ppreethamkesa

90% match

Loading thumbnail…

Hello Observable Plot

This example displays the classic Iris dataset as a scatter plot, mapping petal length to the x-axis and petal width to the y-axis, with points colored by species. It uses Observable Plot’s `plot` and `dot` functions, called from the UMD build, to render the visualization inside a full-window container. Data is loaded asynchronously via `d3.csv` with `autoType`, and D3 v7 is included alongside Plot to handle the fetching and type conversion.

CCurran Kelleher

86% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris dataset, plotting petal length and width for individual flowers, with each species (setosa, versicolor, virginica) assigned a distinct color (blue, red, black). It uses D3 v6 to fetch the CSV data via `d3.csv`, then maps the values to screen coordinates using `d3.scaleLinear` and `d3.extent`. Circles are rendered with an SVG `join` operation, and axes are added with `d3.axisLeft` and `d3.axisBottom`. The plot fills the browser window, leveraging a full-screen SVG canvas.

DDanthalakirankumar

83% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width to the x and y axes. Each point’s color corresponds to the species of iris, distinguishing setosa, versicolor, and virginica. The chart is rendered as an SVG using D3 v6, with axes generated via `d3.axisLeft` and `d3.axisBottom`. Scales are created with `d3.scaleLinear`, and the data is loaded asynchronously from a CSV file using `d3.csv`.

LLakshmiVandanaNunna

83% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length against petal width, with points colored by species (setosa, versicolor, and virginica). The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render SVG circles. The plot is sized to the full window and uses a fixed radius of 4 pixels for each point. Data is fetched from a GitHub-hosted CSV file.

Vvidhyanamini

83% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This visualization displays the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, and virginica). The code loads CSV data using D3’s `d3.csv`, scales the axes with `d3.scaleLinear`, and renders circles as SVG elements. Axes are generated via `d3.axisLeft` and `d3.axisBottom`, and the plot fills the browser window using `window.innerWidth` and `window.innerHeight`. The data is sourced from a GitHub gist containing iris measurements.

Ssaiteja0725

83% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against petal width for three iris species, each colored blue, red, or black. It uses D3 v6 with `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render an SVG scatter plot. Circles are positioned on the x- and y-scales, with the underlying sepal measurements stored as `rx` and `ry` attributes. The visualization fills the browser window and includes labeled tick marks with enlarged font sizes.

Bbindhureddy98

83% match