{"id":21575229,"url":"https://github.com/sejmou/large-scale-data-scatterplot","last_synced_at":"2026-04-17T02:33:21.911Z","repository":{"id":65702881,"uuid":"597721494","full_name":"Sejmou/large-scale-data-scatterplot","owner":"Sejmou","description":"A React scatterplot component for big datasets (10k + datapoints) powered by Three.js (WebGL) and d3","archived":false,"fork":false,"pushed_at":"2023-04-08T15:48:16.000Z","size":587,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T23:45:08.594Z","etag":null,"topics":["charts","d3","data-visualization","javascript","react","scatter-plot","scatterplot","typescript","visualization","web-gl","webgl"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Sejmou.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}},"created_at":"2023-02-05T12:49:36.000Z","updated_at":"2023-06-10T10:55:44.000Z","dependencies_parsed_at":"2024-11-24T15:00:48.947Z","dependency_job_id":null,"html_url":"https://github.com/Sejmou/large-scale-data-scatterplot","commit_stats":{"total_commits":22,"total_committers":2,"mean_commits":11.0,"dds":"0.045454545454545414","last_synced_commit":"c9574a7aa30535f5a8c0489c1e5870a3d775fdb0"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sejmou%2Flarge-scale-data-scatterplot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sejmou%2Flarge-scale-data-scatterplot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sejmou%2Flarge-scale-data-scatterplot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sejmou%2Flarge-scale-data-scatterplot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sejmou","download_url":"https://codeload.github.com/Sejmou/large-scale-data-scatterplot/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244173504,"owners_count":20410295,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","d3","data-visualization","javascript","react","scatter-plot","scatterplot","typescript","visualization","web-gl","webgl"],"created_at":"2024-11-24T12:12:41.294Z","updated_at":"2026-04-17T02:33:21.789Z","avatar_url":"https://github.com/Sejmou.png","language":"TypeScript","readme":"# React scatterplot component for large datasets\n\nThis is a customizable React component library for scatterplots. Unlike many other charting libraries out there, the `\u003cScatterplot/\u003e` component can handle tens of thousands of datapoints without any problems or significant lag. This is made possible by using WebGL (React Three Fiber) under the hood instead of `canvas` or `SVG` elements (like virtually all popular charting libraries do).\nIf you happen to know of any (free!) charting library that can handle large datasets (and includes scatterplots) please let me know! I implemented this only because even after a lot of searching I couldn't find anything online.\n\n## Install library in your own project\n\nNote: throughout this README I assume that you use `yarn` as your package manager. If you use `npm` or `pnpm` just look up the equivalent commands online.\n\n1. run `yarn add @sejmou/react-big-dataset-scatterplot`\n2. import the CSS styles required for the component to render properly in the entrypoint of your app (usually `main.tsx`) by adding the line `import 'react-big-dataset-scatterplot/dist/styles.css';`\n\n## Demo\n\nI have put together an example React (Vite) app that uses this library with a considerably large example dataset of Spotify songs (roughly 30k rows). The code can be found in the `lib-usage-demo` folder.\n\nTo install it locally, navigate to the folder and run `yarn` followed by `yarn dev`.\n\n## Acknowledgements\n\n[This](https://observablehq.com/@grantcuster/using-three-js-for-2d-data-visualization) awesome tutorial by Grant Custer on Observable helped me get started with implementation. However, quite a bit of additional work was required to get things working in React.\n\nCreating a proper React library (and downloadable NPM package) was even more time-consuming and quite a bit of a pain 😅\n\nI turned this into a library with the help of TSDX, a project whose intention is to make the setup of the codebase for JavaScript/TypeScript libraries easier (including React component libraries). Unfortunately it is no longer maintained and a bunch of stuff does not work properly anymore (gotta love Web Dev - things get \"outdated\" soo quickly lol), forcing me to find hacks to work around it. Maybe for my next project I should rather create everything from scratch - then I would at least understand more of what's going on under the hood. Alternatively, I might some day migrate to TurboRepo, which could apparently also be used for projects like this one.\n\nI followed [this](https://zach.codes/build-your-own-flexible-component-library-using-tsdx-typescript-tailwind-css-headless-ui/) tutorial to get Tailwind CSS working inside my project. Maybe it might be useful to you for your own work, too.\n\n## Open features\n\n * axis tick rotation (not as simple as expected to implement)\n * legend positioning\n * smarter plot margin config\n\n## Known bugs\n\n * broken zoom after window/canvas resize\n\n## Development\n\nTSDX scaffolds new libraries inside `/src`. I have also set up a Vite App using my library inside `lib-usage-example`.\n\nThe recommended workflow is to run TSDX in one terminal:\n\n```bash\nyarn start\n```\n\nThis builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.\n\nThen, run either Storybook or the library usage example app:\n\n### Option a): Storybook\n\nRun inside another terminal:\n\n```bash\nyarn storybook\n```\n\nThis loads the stories from `./stories`.\n\n\u003e NOTE: Stories should reference the components as if using the library, similar to the example playground. This means importing from the root project directory. This has been aliased in the tsconfig and the storybook webpack config as a helper.\n\n### Option b): Using example app\nRun the following inside the terminal:\n\n```bash\ncd lib-usage-demo\nyarn # install dependencies\nyarn start\n```\n\nThe example app uses React 18.\n\nOut of the box, the app will not work as `react-big-dataset-scatterplot` is not included in the `package.json` (for deployment it would need to be added by running `yarn add react-big-dataset-scatterplot`). Instead it is meant to be used during development with the current version of the package (from the `dist` folder in the root directory). For this to work, we need to link the package like this:\n\n1. Switch to the parent directory and run `yarn link` there.\n2. Go back to the example app directory and run `yarn link react-big-dataset-scatterplot`. \n\nyarn should from now on use a symlink for the library during development, which means that always automatically the most recent version is used without having to run `yarn` on every change to the library package.\n\nAdditional note: The line `import 'react-big-dataset-scatterplot/dist/tailwind.css';` inside `main.tsx` is important! If this is not included Tailwind styles used by the library are not applied (or in this case, any Tailwind class that is not already used in the rest of the app does NOT work).\n\n## Building\n\n`yarn build`\n\n## Testing\n\n`yarn test`\n\nJest tests are theoretically set up by TSDX to run with `yarn test`. I don't use tests though :)\n\n## Other stuff that might be good to know\n\n### Bundle analysis\n\nCalculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `yarn size` and visualize it with `yarn analyze`.\n\n### Rollup\n\nTSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.\n\n### TypeScript\n\n`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. I have adjusted it according to my needs.\n\n## Continuous Integration\n\n### GitHub Actions\n\nTwo actions were added by TSDX by default:\n\n- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix (changed that a bit, removing Node 14 as it is close to end of life anyway)\n- `size` which comments cost comparison of your library on every pull request using [size-limit](https://github.com/ai/size-limit)\n\n## Optimizations\n\nPlease see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:\n\n```js\n// ./types/index.d.ts\ndeclare var __DEV__: boolean;\n\n// inside your code...\nif (__DEV__) {\n  console.log('foo');\n}\n```\n\nYou can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.\n\n## Module Formats\n\nCJS, ESModules, and UMD module formats are supported.\n\nThe appropriate paths should be configured in `package.json` and `dist/index.js` accordingly. If any issues come up I will have to find a solution myself as the TSDX is not maintained anymore lol\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsejmou%2Flarge-scale-data-scatterplot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsejmou%2Flarge-scale-data-scatterplot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsejmou%2Flarge-scale-data-scatterplot/lists"}