{"id":49810473,"url":"https://github.com/travishorn/svplot","last_synced_at":"2026-05-13T00:36:05.245Z","repository":{"id":344166556,"uuid":"1180862544","full_name":"travishorn/svplot","owner":"travishorn","description":"Reusable Svelte 5 action for rendering Observable Plot charts.","archived":false,"fork":false,"pushed_at":"2026-03-24T19:34:43.000Z","size":181,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-03-26T00:52:38.828Z","etag":null,"topics":["charts","data-visualization","observable-plot","svelte"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/travishorn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-13T13:47:17.000Z","updated_at":"2026-03-24T19:34:46.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/travishorn/svplot","commit_stats":null,"previous_names":["travishorn/svplot"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/travishorn/svplot","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travishorn%2Fsvplot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travishorn%2Fsvplot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travishorn%2Fsvplot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travishorn%2Fsvplot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/travishorn","download_url":"https://codeload.github.com/travishorn/svplot/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travishorn%2Fsvplot/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32963172,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-12T23:30:32.555Z","status":"ssl_error","status_checked_at":"2026-05-12T23:30:18.191Z","response_time":102,"last_error":"SSL_read: 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":["charts","data-visualization","observable-plot","svelte"],"created_at":"2026-05-13T00:36:03.664Z","updated_at":"2026-05-13T00:36:05.176Z","avatar_url":"https://github.com/travishorn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svplot\n\nReusable Svelte 5 action for rendering [Observable Plot](https://observablehq.com/plot) charts.\n\n## Install\n\n```sh\nnpm install @travishorn/svplot @observablehq/plot\n```\n\n`@observablehq/plot` is a peer dependency because you'll typically want to\ncreate marks and plot options with it.\n\n## Usage\n\n```svelte\n\u003cscript\u003e\n\timport * as Plot from '@observablehq/plot';\n\timport { ObservablePlot } from '@travishorn/svplot';\n\n\tlet data = $state([\n\t\t{ category: 'East', value: 1 },\n\t\t{ category: 'North', value: 6 },\n\t\t{ category: 'South', value: 8 },\n\t\t{ category: 'West', value: 5 }\n\t]);\n\n\tlet options = $derived({\n\t\tgrid: true,\n\t\tmarks: [\n\t\t\tPlot.barY(data, {\n\t\t\t\tx: 'category',\n\t\t\t\ty: 'value',\n\t\t\t\tfill: 'category'\n\t\t\t})\n\t\t]\n\t});\n\u003c/script\u003e\n\n\u003cdiv use:ObservablePlot={options} role=\"img\"\u003e\u003c/div\u003e\n```\n\nWhen `options` changes, the action disposes the current plot and renders a\nnew one. So if you wrap your data with `$state()` and your options with\n`$derived()`, as seen above, you can make the visualization \"live.\"\n\nFor example, adding the following block will cause a random bar to change every\n1 second. The rendered visualization updates when the data does.\n\n```javascript\nsetInterval(() =\u003e {\n\tconst i = Math.floor(Math.random() * data.length); // Choose a random bar\n\tdata[i] = { ...data[i], value: Math.random() * 10 }; // Set a random value\n\tdata = [...data]; // Trigger reactivity\n}, 1000);\n```\n\n## API\n\n### `ObservablePlot`\n\nUsage:\n\n- Use as a Svelte action: `use:ObservablePlot={options}`.\n- `options` is the [plot\n  options](https://observablehq.com/plot/features/plots#plot) passed to\n  Observable Plot, which are used to create the chart.\n\n## Development\n\nClone the repository:\n\n```bash\ngit clone https://github.com/travishorn/svplot\n```\n\nChange into the directory:\n\n```bash\ncd svplot\n```\n\nInstall dependencies:\n\n```bash\nnpm install\n```\n\n`src/lib` contains the published library code. `src/routes` contains a demo app.\n\nRun the development server:\n\n```bash\nnpm run dev\n```\n\nYou can see the demo in your browser at http://localhost:5173.\n\nCheck the types:\n\n```bash\nnpm run check\n```\n\nBuild and validate the package:\n\n```bash\nnpm run prepack\n```\n\nLint the code:\n\n```bash\nnpm run lint\n```\n\n## License\n\nThe MIT License\n\nCopyright 2026 Travis horn\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of\nthis software and associated documentation files (the “Software”), to deal in\nthe Software without restriction, including without limitation the rights to\nuse, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of\nthe Software, and to permit persons to whom the Software is furnished to do so,\nsubject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS\nFOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR\nCOPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\nIN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\nCONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftravishorn%2Fsvplot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftravishorn%2Fsvplot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftravishorn%2Fsvplot/lists"}