{"id":51464672,"url":"https://github.com/simplearyan/chart-studio","last_synced_at":"2026-07-06T09:31:50.949Z","repository":{"id":351124778,"uuid":"1209642507","full_name":"simplearyan/chart-studio","owner":"simplearyan","description":"Chart Studio Web","archived":false,"fork":false,"pushed_at":"2026-04-13T17:12:15.000Z","size":90,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-13T19:04:47.765Z","etag":null,"topics":["canvas","mediabunn","webcodecs"],"latest_commit_sha":null,"homepage":"https://simplearyan.github.io/chart-studio/","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/simplearyan.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-13T16:25:49.000Z","updated_at":"2026-04-13T17:12:19.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/simplearyan/chart-studio","commit_stats":null,"previous_names":["simplearyan/chart-studio"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/simplearyan/chart-studio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Fchart-studio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Fchart-studio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Fchart-studio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Fchart-studio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simplearyan","download_url":"https://codeload.github.com/simplearyan/chart-studio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplearyan%2Fchart-studio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35185688,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-06T02:00:07.184Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["canvas","mediabunn","webcodecs"],"created_at":"2026-07-06T09:31:50.213Z","updated_at":"2026-07-06T09:31:50.922Z","avatar_url":"https://github.com/simplearyan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chart Studio Web\n\n**Chart Studio Web** is a lightweight, strictly vanilla Javascript framework built natively on top of the DOM and `WebCodecs` APIs. No React or heavy view-layer dependencies. It acts as an ultra-fast HTML5 Canvas Timeline Engine built for data animation and high-performance offline video rendering.\n\n## 🚀 Key Features\n\n*   **Interactive Design Studio Editor**\n    Clean glassmorphic dark-mode interface split seamlessly across customizable `.md`/JSON schema property inputs on the left, Timeline Canvas Preview tightly bound in the center, and dynamic export configurations housed on the right. Fully responsive across layouts `\u003c 1024px`.\n*   **Engine \u0026 Playback Core (`Core.js`)**\n    Robust `requestAnimationFrame` handler seamlessly managing elapsed times, play/pause state machine, and seeking logic natively integrated into the DOM scale scrubbing slider.\n*   **Chart Animations (`ChartObject.js`)**\n    Scalable object models mapped to the engine natively resolving CSS animations. Supports `bar`, `line`, and `race` visualizations. Automatically synchronizes easing pipelines natively built over Bezier matrices (`easeInOutCubic`, `easeOutBounce`, `easeOutElastic`).\n*   **Dual Dual Export Engine**\n    *   **Render Mode (High Quality WebWorker)**: The `mediabunny.worker.js` offline WebCodec renderer guarantees zero frame drops. Extracts sequence frames frame-by-frame utilizing rigorous 15-batch backpressure task queuing asynchronously encoded using native Chromium codec standards mapped strictly into `MP4`/`WEBM`/`MOV` containers perfectly sync'd to pure microseconds.\n    *   **Record Mode (Ultra-Fast 60FPS Native Streams)**: Uses standard `canvas.captureStream(FPS)` mapped to `new MediaRecorder` APIs capturing real-time WebGL buffer pushes dynamically saving lightweight output buffers instantaneously seamlessly.\n\n---\n\n## 🛠 Prerequisites \u0026 Installation\n\nTo run this Vanilla Vite structure:\n1. Ensure **Node.js** (\u003e= 18) is installed.\n2. Initialize and start the lightweight Vite HMR Web Server.\n\n```bash\nnpm install\nnpm run dev\n```\n\n---\n\n## 📱 Responsiveness \u0026 UX Workflow\n\nDesigned exclusively to leverage Mobile First Media Queries, seamlessly shrinking `var(--bg-panel)` elements into vertical column hierarchies preventing horizontal overflow on `max-width: 1024px` constraints ensuring smooth UI transitions. Modern Chrome versions correctly cache the generated Export API artifacts natively avoiding network data corruption.\n\n## 💡 Engine Mechanics (Advanced)\n\nIf expanding `ChartObject`, leverage the standard lifecycle methods bound to `engine.render()` loops:\n- `.update(time, duration)`: Resolves all dynamic scaling factors utilizing relative interpolation percentages smoothly locking animations entirely irrespective of lag overhead.\n- `.draw(ctx)`: Clears and writes exclusively over the 2D native context directly.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplearyan%2Fchart-studio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimplearyan%2Fchart-studio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplearyan%2Fchart-studio/lists"}