Hello Observable Plot

100%

Hello Observable Plot

✓ Published4🌍 Public

Last edited Apr 6, 2022

Created on May 17, 2021

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.

AI-generated description

Minimal example demonstrating use of Observable Plot with vanilla HTML.

MIT Licensed

Similar vizzes

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

92% match

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

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

86% match

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

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

85% match

Loading thumbnail…

D3 Scatter Plot Annotated

This example renders the classic Iris flower dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis using D3 scales and SVG circles. It loads the CSV with `d3.csv`, parses numeric fields, and draws axes with `d3.axisLeft` and `d3.axisBottom`. The visualization fills the browser window, with tick labels styled to a larger font size for readability.

CCurran Kelleher

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

79% match

Loading thumbnail…

Scatter Plot for Iris Data

This example renders the classic Iris dataset as a scatter plot using D3 v6. It maps petal length and petal width to the x and y axes, coloring each point by species (setosa, versicolor, or virginica) with yellow, pink, or blue fills. The dataset is loaded via `d3.csv` from a GitHub raw URL, with numeric parsing of all measurements. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, using `d3.scaleLinear` and `d3.extent` to set domains based on the data.

Aarcothanmukha

79% match