{"id":15572779,"url":"https://github.com/nadjascodejourney/datavis_plot-and-react","last_synced_at":"2026-05-07T11:34:15.344Z","repository":{"id":254591428,"uuid":"846994591","full_name":"nadjascodejourney/DataVis_Plot-and-React","owner":"nadjascodejourney","description":"Learning to visualize data with Plot by Observable in React","archived":false,"fork":false,"pushed_at":"2024-08-24T21:28:23.000Z","size":188,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T06:31:47.666Z","etag":null,"topics":["chart","datavisualization","observable","plot","react","shadcn","useeffect","useref"],"latest_commit_sha":null,"homepage":"https://data-vis-plot-and-react.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nadjascodejourney.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-24T14:47:45.000Z","updated_at":"2024-09-23T07:59:31.000Z","dependencies_parsed_at":"2024-08-24T15:59:44.096Z","dependency_job_id":"934e0795-0ff9-4bf2-bfda-db09e206fd9e","html_url":"https://github.com/nadjascodejourney/DataVis_Plot-and-React","commit_stats":null,"previous_names":["nadjascodejourney/datavis_plot-and-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nadjascodejourney/DataVis_Plot-and-React","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadjascodejourney%2FDataVis_Plot-and-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadjascodejourney%2FDataVis_Plot-and-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadjascodejourney%2FDataVis_Plot-and-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadjascodejourney%2FDataVis_Plot-and-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nadjascodejourney","download_url":"https://codeload.github.com/nadjascodejourney/DataVis_Plot-and-React/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadjascodejourney%2FDataVis_Plot-and-React/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32735237,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","datavisualization","observable","plot","react","shadcn","useeffect","useref"],"created_at":"2024-10-02T18:06:31.127Z","updated_at":"2026-05-07T11:34:15.313Z","avatar_url":"https://github.com/nadjascodejourney.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# First Datavisualization with Plot by Observable in React\n\nSimple data visualization created with Plot by Observable in React code.\n\nImportant to know:\n\nSince Plot creates its own DOM nodes to display the datavis, we need to \"escape\" the React world to delegate this completely to Plot.\nThis can be done by using Reacts useRef hook to designate a DOM node for Plot, where it can draw its graphs into.\nAll this happens within a useEffect and by doing this, Plot acutally draws its graphs as a side effect within the app.\n\n![Projektvorschau](./ScreenshotsPlotCharts.png)\n\nThis project also is using a shadcn ui card component for the dot chart just to try out.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnadjascodejourney%2Fdatavis_plot-and-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnadjascodejourney%2Fdatavis_plot-and-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnadjascodejourney%2Fdatavis_plot-and-react/lists"}