observer plot

100%

✓ Published1🌍 Public

Last edited Jun 26, 2022

Created on Jun 25, 2022

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.

AI-generated description

Minimal example demonstrating use of Observable Plot with vanilla HTML.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of observer plot

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.

SSamanvitha1

91% 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

88% match

Loading thumbnail…

Scatter Plot

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`.

JJulia Huang

87% 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

85% match

Loading thumbnail…

React + Observable

This example demonstrates how to embed an Observable Plot visualization inside a React application. It displays the classic Iris dataset, plotting petal length against petal width with points colored by species. The code uses `Plot.plot` and `Plot.dot` from `@observablehq/plot`, while React's `useRef` and `useEffect` manage the DOM element. Data is loaded asynchronously via `d3.csv` with `autoType`, and the chart fills the full browser window.

RRiderman de Sousa Barbosa

80% match

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

79% 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

78% match

Loading thumbnail…

ScatterPlot Practice

This example visualizes the classic Iris dataset as an interactive scatter plot, mapping petal length and petal width onto the x and y axes. Each flower species is represented by a distinct color—setosa in blue, versicolor in green, and virginica in black—with hover tooltips revealing exact coordinate values. The visualization is built using D3 v7 within a React framework, utilizing `scaleLinear`, `axisBottom`, and `axisLeft` for scaling and axes, `symbol` and `scaleOrdinal` for shape generation, and the `join` API to efficiently update SVG paths. The code loads data asynchronously via `d3.csv` and renders to an SVG canvas sized to the browser window.

AAatish Dhami

78% match