Skip to main content
SimilarExport ZIP
100%

React + Observable

✓ Published0🌍 Public
RRiderman de Sousa Barbosa
Last edited Jun 15, 2022
Created on Jun 15, 2022
Forked from React Starter

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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 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
84% 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
80% 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
78% match
Loading thumbnail…

D3 Plot with React

This example visualizes the Iris dataset as a scatter plot of petal length against sepal width, with each flower represented by a circle. It uses React to render SVG elements, while d3-scale’s `scaleLinear` computes the x and y positions and d3-array’s `extent` sets the domains. Custom React components (AxisBottom, AxisLeft, Marks) generate ticks and circles. Data loads asynchronously via d3-fetch’s `csv` from a GitHub gist. The chart includes rotated and positioned axis labels, and hover tooltips using SVG `<title>` elements.

WWasanta Pruttisarikorn
77% match
Loading thumbnail…

Rehusable Scatter Plot

This example demonstrates a reusable scatter plot built with React and D3, visualizing the classic Iris dataset. It maps petal length and sepal length onto x and y axes using `scaleLinear` and `extent`, rendering circles via SVG. The chart is generated by the custom `scatterPlot` function, which configures margins, radius, and accessor functions through a fluent API. Axes are added with `axisLeft` and `axisBottom`, while data is loaded asynchronously using `csv` and parsed with a row conversion function.

AArturo Guevara
75% match
Loading thumbnail…

D3 + React

This example shows a scatterplot of the classic Iris dataset, plotting sepal length against petal length. It uses React for component structure and state management, while D3 modules handle the data-driven visualization: `d3.csv` loads the data, `d3.scaleLinear` and `d3.extent` set the scales, and `d3.axisLeft`/`d3.axisBottom` draw the axes. The SVG circles are rendered via D3 selections within a React effect, bridging the two libraries.

SSubhendu Karmakar
75% match
Loading thumbnail…

Iris Data Set

This example visualizes the Iris flower dataset as a scatter plot, showing the relationship between petal length and sepal width for individual samples. Using React with d3.scaleLinear for both axes and d3.extent for domains, the plot renders SVG circles with native tooltips via <title> elements. The code loads CSV data through d3.csv, formats tick labels with d3.format, and includes custom axis components. A loading state displays "Loading..." text while the data fetch is in progress.

TTaweewat Somboonpanyakul
75% match