{"id":13836921,"url":"https://github.com/streamcode9/svg-time-series","last_synced_at":"2025-05-04T22:31:29.179Z","repository":{"id":141567455,"uuid":"59520347","full_name":"streamcode9/svg-time-series","owner":"streamcode9","description":"SVG time-series charting library ","archived":false,"fork":false,"pushed_at":"2024-12-02T03:21:12.000Z","size":1258,"stargazers_count":20,"open_issues_count":39,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-08T12:51:47.433Z","etag":null,"topics":["charting-library","charts","d3","svg","time-series","vizualize-data"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/streamcode9.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":"2016-05-23T21:42:36.000Z","updated_at":"2025-04-01T12:15:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"be3e7ea1-d10d-4c02-a75e-fbc8f1575c0f","html_url":"https://github.com/streamcode9/svg-time-series","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamcode9%2Fsvg-time-series","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamcode9%2Fsvg-time-series/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamcode9%2Fsvg-time-series/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamcode9%2Fsvg-time-series/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/streamcode9","download_url":"https://codeload.github.com/streamcode9/svg-time-series/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252408253,"owners_count":21743081,"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":["charting-library","charts","d3","svg","time-series","vizualize-data"],"created_at":"2024-08-04T15:00:57.321Z","updated_at":"2025-05-04T22:31:28.812Z","avatar_url":"https://github.com/streamcode9.png","language":"TypeScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"## svg-time-series\n\n[![Join the chat at https://gitter.im/streamcode9/svg-time-series](https://badges.gitter.im/streamcode9/svg-time-series.svg)](https://gitter.im/streamcode9/svg-time-series?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\nD3.js-based SVG time series charts done right to reach 60 FPS. Much much faster pan and zoom than other charts, whether canvas- or SVG-based.\n\n- [demo 1][d1]: 1 grid, 2 series of 1070 points\n- [demo 2][d2]: 5 grids, 10 series of 1070 points\n\nDemo 1 reaches 60 FPS on desktops, recent iPhones and top Android phones.\nDemo 2 shows 60 FPS on desktops, about 24 FPS on iPhone and about 3 FPS on old and slow LG D90.\n\nIn comparison, [dygraphs.org](http://dygraphs.org) library basically never reaches 60 fps. Try to pan their demo at the home page by holding `shift`. Note that the demos above use the same NY vs SF temperature dataset.\n\nD3.js seem slow: [stock D3 panning][d3stock]. But it turns out the SVG rasterization is not the bottleneck. Only 2 issues had to be fixed in that demo to reach 60 fps:\n\n- avoid extra attribute setting on SVG lines of the grid during pan and zoom (partially already in HEAD of d3-axis)\n- draw in `d3.timeout()` instead of `d3.zoom()`, that is, avoid drawing more often than screen refreshes\n\nIn the demos above, SVG DOM manipulations during grid updates seem to consume at least 20% of drawing time, so further optimization\nwork is possible. Keep watching!\n\n## Build instructions\n\n- Install nodejs 20.x (npm and npx will be also installed)\n- `npm ci` in the project root to install pinned dependencies\n- `cd samples; npx vite` to start the dev server\n- Open the URL in your browser. The vite web server doesn't properly handle 4040 errors, so if you see a blank page the URL is likely incorrect.\n- Navigate to `demo1.html` or `demo2.html` in the list of links in the browser.\n\n## Secrets of Speed\n\n- No legacy\n- Very basic features\n- Rasterizer-side coordinate transformations (No JS multiplication loops)\n- A Range Minimum Query index for O(log(N)) autoscale (No JS minmax loops)\n- No drawing or heavy CPU work in mouse handlers\n- Don't change anything more often than once per screen refresh\n- Only calculate and apply coordinate transformations in `requestAnimationFrame`\n- Take care of `requestAnimationFrame` not firing in background. Don't redraw when in background to save battery.\n\n## Benchmarks\n\n| Description                     |  Model  | Browser |                     FPS | Resolution |   CPU   |          GPU           |\n| ------------------------------- | :-----: | :-----: | ----------------------: | :--------: | :-----: | :--------------------: |\n| SegmentTree reindexing          | Desktop | Chrome  |   94ms for 1000 repeats |            | i5-4670 | NVIDIA GeForce GTX 660 |\n| SegmentTree reindexing          | Desktop | Firefox |  861ms for 1000 repeats |            | i5-4670 | NVIDIA GeForce GTX 660 |\n| SegmentTree reindexing          | Desktop |  Edge   | 1255ms for 1000 repeats |            | i5-4670 | NVIDIA GeForce GTX 660 |\n| Path drawing and transformation | Desktop | Chrome  |                      60 |  1680×917  | i5-4670 | NVIDIA GeForce GTX 660 |\n| Path drawing and transformation | Desktop | Firefox |                      30 |  1680×917  | i5-4670 | NVIDIA GeForce GTX 660 |\n| Path drawing and transformation | Desktop |  Edge   |                      60 |  1680×917  | i5-4670 | NVIDIA GeForce GTX 660 |\n| Grid drawing and transformation | Desktop | Chrome  |                    59.7 |  1680×917  | i5-4670 | NVIDIA GeForce GTX 660 |\n| Grid drawing and transformation | Desktop | Firefox |                      47 |  1680×917  | i5-4670 | NVIDIA GeForce GTX 660 |\n| Grid drawing and transformation | Desktop |  Edge   |                    59.7 |  1680×917  | i5-4670 | NVIDIA GeForce GTX 660 |\n| Demo2 without grid              | Desktop | Chrome  |                      59 |  1680×917  | i5-4670 | NVIDIA GeForce GTX 660 |\n| Demo2 without grid              | Desktop | Firefox |                      30 |  1680×917  | i5-4670 | NVIDIA GeForce GTX 660 |\n| Demo2 without grid              | Desktop |  Edge   |                      59 |  1680×917  | i5-4670 | NVIDIA GeForce GTX 660 |\n| SVG path recreation             | Desktop | Chrome  |                      52 |  1680×917  | i5-4670 | NVIDIA GeForce GTX 660 |\n| SVG path recreation             | Desktop | Firefox |                    22.7 |  1680×917  | i5-4670 | NVIDIA GeForce GTX 660 |\n| SVG path recreation             | Desktop |  Edge   |                    20.3 |  1680×917  | i5-4670 | NVIDIA GeForce GTX 660 |\n| SegmentTree Queries             | Desktop | Chrome  |                    59.7 |  1680×917  | i5-4670 | NVIDIA GeForce GTX 660 |\n| SegmentTree Queries             | Desktop | Firefox |                    27.3 |  1680×917  | i5-4670 | NVIDIA GeForce GTX 660 |\n| SegmentTree Queries             | Desktop |  Edge   |                      60 |  1680×917  | i5-4670 | NVIDIA GeForce GTX 660 |\n\n## Improvements over Stock D3 examples\n\n### competitors/d3-axes-grad\n\nStock axes panning example and:\n\n- No drawing or heavy CPU work in mouse handlers\n- Don't change anything more often than once per screen refresh\n\n### competitors/d3-axes\n\nd3-axes grad and performance improvements of axis not accepted by the upstream\n\n### competitors/d3-zoom-pan\n\nStock d3 phyllotaxis pan-zoom example plus:\n\n- No drawing or heavy CPU work in mouse handlers\n- Don't change anything more often than once per screen refresh\n\n[d1]: https://bl.ocks.org/streamcode9/raw/0ad51c8422d1b0238f0f8ecce03eea60/\n[d2]: https://bl.ocks.org/streamcode9/raw/9fc767e29414c2d90f77da4799b9fdf0/\n[d3stock]: http://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstreamcode9%2Fsvg-time-series","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstreamcode9%2Fsvg-time-series","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstreamcode9%2Fsvg-time-series/lists"}