Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nadjascodejourney/datavis_plot-and-react
Learning to visualize data with Plot by Observable in React
https://github.com/nadjascodejourney/datavis_plot-and-react
chart datavisualization observable plot react shadcn useeffect useref
Last synced: 1 day ago
JSON representation
Learning to visualize data with Plot by Observable in React
- Host: GitHub
- URL: https://github.com/nadjascodejourney/datavis_plot-and-react
- Owner: nadjascodejourney
- Created: 2024-08-24T14:47:45.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-08-24T21:28:23.000Z (about 1 month ago)
- Last Synced: 2024-08-25T16:06:16.844Z (about 1 month ago)
- Topics: chart, datavisualization, observable, plot, react, shadcn, useeffect, useref
- Language: JavaScript
- Homepage: https://data-vis-plot-and-react.vercel.app/
- Size: 184 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# First Datavisualization with Plot by Observable in React
Simple data visualization created with Plot by Observable in React code.
Important to know:
Since Plot creates its own DOM nodes to display the datavis, we need to "escape" the React world to delegate this completely to Plot.
This can be done by using Reacts useRef hook to designate a DOM node for Plot, where it can draw its graphs into.
All this happens within a useEffect and by doing this, Plot acutally draws its graphs as a side effect within the app.![Projektvorschau](./ScreenshotsPlotCharts.png)
This project also is using a shadcn ui card component for the dot chart just to try out.