{"id":14766174,"url":"https://github.com/hatemhosny/racing-bars","last_synced_at":"2025-04-05T08:03:52.892Z","repository":{"id":253784360,"uuid":"272015000","full_name":"hatemhosny/racing-bars","owner":"hatemhosny","description":"Bar chart race made easy 🎉","archived":false,"fork":false,"pushed_at":"2024-12-15T10:41:39.000Z","size":10617,"stargazers_count":88,"open_issues_count":8,"forks_count":7,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-03-29T07:02:23.734Z","etag":null,"topics":["animation","charts","d3","hacktoberfest","visualization"],"latest_commit_sha":null,"homepage":"https://racing-bars.hatemhosny.dev/","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/hatemhosny.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":"FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":["hatemhosny"],"ko_fi":"hatemhosny","custom":["https://paypal.me/hatemhosni"]}},"created_at":"2020-06-13T13:33:33.000Z","updated_at":"2025-03-15T03:02:07.000Z","dependencies_parsed_at":"2024-09-09T11:04:29.971Z","dependency_job_id":"8d004093-e1d3-4cba-a987-348090d4ef70","html_url":"https://github.com/hatemhosny/racing-bars","commit_stats":null,"previous_names":["hatemhosny/racing-bars"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hatemhosny%2Fracing-bars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hatemhosny%2Fracing-bars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hatemhosny%2Fracing-bars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hatemhosny%2Fracing-bars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hatemhosny","download_url":"https://codeload.github.com/hatemhosny/racing-bars/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305932,"owners_count":20917208,"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":["animation","charts","d3","hacktoberfest","visualization"],"created_at":"2024-09-16T08:00:29.434Z","updated_at":"2025-04-05T08:03:52.865Z","avatar_url":"https://github.com/hatemhosny.png","language":"TypeScript","funding_links":["https://github.com/sponsors/hatemhosny","https://ko-fi.com/hatemhosny","https://paypal.me/hatemhosni"],"categories":["Projects"],"sub_categories":["Visualizations"],"readme":"[![Ceasefire_Now-techforpalestine.org](https://img.shields.io/badge/%F0%9F%87%B5%F0%9F%87%B8_Ceasefire_Now-techforpalestine.org-D83838?color=D83838)](https://www.techforpalestine.org)\n\n# RacingBars\n\nBar chart race made easy 🎉\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"192\" src=\"https://racing-bars.hatemhosny.dev/img/logo.png\"\u003e\u003c/img\u003e\n\u003c/p\u003e\n\n_RacingBars_ is an [open-source](https://github.com/hatemhosny/racing-bars), light-weight (~45kb gzipped), easy-to-use, and [feature-rich](#features) javascript library for bar chart race, based on \u003ca href=\"https://d3js.org\" target=\"_blank\" className=\"external\"\u003eD3.js\u003c/a\u003e.\n\n_RacingBars_ is available for JavaScript, TypeScript, React, Vue and Svelte.\n\n[![racing-bars: npm version](https://img.shields.io/npm/v/racing-bars)](https://www.npmjs.com/package/racing-bars)\n[![racing-bars: npm downloads](https://img.shields.io/npm/dw/racing-bars)](https://www.npmjs.com/package/racing-bars)\n[![racing-bars: jsdelivr downloads](https://data.jsdelivr.com/v1/package/npm/racing-bars/badge?style=rounded)](https://www.jsdelivr.com/package/npm/racing-bars)\n[![license - MIT](https://img.shields.io/github/license/hatemhosny/racing-bars)](https://github.com/hatemhosny/racing-bars/blob/develop/LICENSE)\n[![racing-bars: GitHub repo](https://img.shields.io/github/stars/hatemhosny/racing-bars?style=social)](https://github.com/hatemhosny/racing-bars)\n\n🎡 Try it now on the [online playground](https://racing-bars.hatemhosny.dev/playground).\n\n📖 [Documentations](https://racing-bars.hatemhosny.dev)\n\n\u003cp align=\"center\"\u003e\n\u003cimg height=\"322\" width=\"716\" src=\"https://racing-bars.hatemhosny.dev/img/racing-bars.gif\"\u003e\u003c/img\u003e\n\u003c/p\u003e\n\n## Features\n\n- Easy to use.\n- Light-weight (~45kb gzipped).\n- [Highly configurable](https://racing-bars.hatemhosny.dev/documentation/options), with sensible defaults.\n- Available for vanilla JavaScript,TypeScript, React, Vue and Svelte.\n- Responsive / configurable [chart size](https://racing-bars.hatemhosny.dev/guides/chart-size).\n- Light and dark [themes](https://racing-bars.hatemhosny.dev/guides/themes-styles).\n- Good looking default [colors](https://racing-bars.hatemhosny.dev/guides/colors), also configurable with color maps or palettes.\n- Customizable title, sub-title, caption and date counter. They all allow displaying [calculated/dynamic values](https://racing-bars.hatemhosny.dev/guides/dynamic-values).\n- Flexible handling for various [data shapes and formats](https://racing-bars.hatemhosny.dev/documentation/data).\n- Data manipulation for [data transformation](https://racing-bars.hatemhosny.dev/documentation/options#datatransform), [cumulative sums](https://racing-bars.hatemhosny.dev/documentation/data#cumulative-sum) and [filling date gaps](https://racing-bars.hatemhosny.dev/documentation/data#filling-gaps-in-data).\n- [Icons](https://racing-bars.hatemhosny.dev/guides/icons).\n- [Labels](https://racing-bars.hatemhosny.dev/guides/labels) on the bars or outside.\n- [Groups](https://racing-bars.hatemhosny.dev/guides/groups) with filters.\n- Bar [highlight and selection](https://racing-bars.hatemhosny.dev/guides/highlight-select).\n- Autorun or start manually.\n- Allows looping.\n- Optional fixed scale.\n- Custom start/end dates.\n- Allows changing speed.\n- Controls for play/pause/skip-back/skip-forward ([chart controls](https://racing-bars.hatemhosny.dev/guides/chart-controls)).\n- Overlays for play/repeat ([chart controls](https://racing-bars.hatemhosny.dev/guides/chart-controls)).\n- Keyboard and mouse controls ([chart controls](https://racing-bars.hatemhosny.dev/guides/chart-controls)).\n- [Multiple charts](https://racing-bars.hatemhosny.dev/guides/multiple-charts) can be inserted in the same page.\n- [API](https://racing-bars.hatemhosny.dev/documentation/api) to control the chart.\n- Emits custom DOM [events](https://racing-bars.hatemhosny.dev/documentation/events).\n- Comprehensive [documentation](https://racing-bars.hatemhosny.dev/category/documentation/), with [usage guides](https://racing-bars.hatemhosny.dev/category/guides), [examples gallery](https://racing-bars.hatemhosny.dev/category/gallery) and an [online playground](https://racing-bars.hatemhosny.dev/playground).\n- Open-source ([MIT License](https://racing-bars.hatemhosny.dev/license)).\n\n## Getting Started\n\nUsage options include:\n\n### Option 1: Using a bundler\n\nInstall from npm\n\n```shell\nnpm install racing-bars\n```\n\nthen you can import it:\n\n\u003c!-- prettier-ignore-start --\u003e\n\n```js\nimport { race } from \"racing-bars\";\n\nconst options = {\n  title: 'My Racing Bars',\n  // ... other options\n};\n\nrace(\"/data.json\", \"#race\", options);\n```\n\n[Open in LiveCodes](https://livecodes.io/?x=id/k9djehhdtzq)\n\n### Option 2: Load from CDN\n\n#### ESM\n\n```html\n\u003cdiv id=\"race\" style=\"height: 80vh\"\u003e\u003c/div\u003e\n\u003cscript type=\"module\"\u003e\n  import { race } from \"https://cdn.jsdelivr.net/npm/racing-bars\";\n\n  const options = {\n    title: 'My Racing Bars',\n    // ... other options\n  };\n\n  race(\"/data.json\", \"#race\", options);\n\u003c/script\u003e\n```\n\n[Open in LiveCodes](https://livecodes.io/?x=id/ztr5k5yayjh)\n\n#### UMD\n\n```html\n\u003cdiv id=\"race\" style=\"height: 80vh\"\u003e\u003c/div\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/racing-bars/racing-bars.umd.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const options = {\n    title: 'My Racing Bars',\n    // ... other options\n  };\n\n  // the UMD version provides the global object `racingBars`\n  racingBars.race(\"/data.json\", \"#race\", options);\n\u003c/script\u003e\n```\n\n[Open in LiveCodes](https://livecodes.io/?x=id/zen24gm8irn)\n\n\u003c!-- prettier-ignore-end --\u003e\n\nPlease refer to [documentation website](https://racing-bars.hatemhosny.dev/) for [usage](https://racing-bars.hatemhosny.dev/getting-started/usage), [data preparation](https://racing-bars.hatemhosny.dev/documentation/data), [chart options](https://racing-bars.hatemhosny.dev/documentation/options), [API](https://racing-bars.hatemhosny.dev/documentation/api) and more.\n\n## Examples Gallery\n\nSee [gallery](https://racing-bars.hatemhosny.dev/category/gallery/) for usage examples.\n\n## Playground\n\nGo to the [online playground](https://racing-bars.hatemhosny.dev/playground/) to try out the library.\n\n## Contribution\n\nContributions are welcome and highly appreciated.\n\nBefore contributing, please read the [code of conduct](https://github.com/hatemhosny/racing-bars/blob/develop/CODE_OF_CONDUCT.md).\n\nPlease [open an issue](https://github.com/hatemhosny/racing-bars/issues/new) to discuss your ideas before [creating a pull request](https://github.com/hatemhosny/racing-bars/pulls).\n\n## License\n\n[MIT](https://github.com/hatemhosny/racing-bars/blob/develop/LICENSE) License © [Hatem Hosny](https://github.com/hatemhosny).\n\n## Sponsor 💚\n\nPlease consider [sponsoring](https://racing-bars.hatemhosny.dev/sponsor) the project to support its maintenance and continued development.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhatemhosny%2Fracing-bars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhatemhosny%2Fracing-bars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhatemhosny%2Fracing-bars/lists"}