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: about 2 months 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 (9 months ago)
• Default Branch: main
• Last Pushed: 2024-08-24T21:28:23.000Z (9 months ago)
• Last Synced: 2025-02-03T19:11:16.557Z (4 months 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: 1
• 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.