{"id":15760487,"url":"https://github.com/teociaps/bubble-chart","last_synced_at":"2025-03-13T19:32:00.984Z","repository":{"id":254443423,"uuid":"834467147","full_name":"teociaps/bubble-chart","owner":"teociaps","description":"Create custom bubble charts 🫧","archived":false,"fork":false,"pushed_at":"2024-09-28T20:24:05.000Z","size":362,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-07T16:17:40.374Z","etag":null,"topics":["animated","bubble-chart","chart","d3","d3-chart","javascript","typescript"],"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/teociaps.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":"2024-07-27T11:02:09.000Z","updated_at":"2024-09-28T20:24:02.000Z","dependencies_parsed_at":"2024-10-25T09:25:05.737Z","dependency_job_id":"9d8e47d8-5f96-4cb4-ad89-209628402035","html_url":"https://github.com/teociaps/bubble-chart","commit_stats":null,"previous_names":["teociaps/bubble-chart"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teociaps%2Fbubble-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teociaps%2Fbubble-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teociaps%2Fbubble-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teociaps%2Fbubble-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/teociaps","download_url":"https://codeload.github.com/teociaps/bubble-chart/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243469245,"owners_count":20295715,"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":["animated","bubble-chart","chart","d3","d3-chart","javascript","typescript"],"created_at":"2024-10-04T10:58:24.878Z","updated_at":"2025-03-13T19:31:59.599Z","avatar_url":"https://github.com/teociaps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @teociaps/bubble-chart\n\n[![npm version](https://img.shields.io/npm/v/@teociaps/bubble-chart)](https://www.npmjs.com/package/@teociaps/bubble-chart)\n[![CI](https://github.com/teociaps/bubble-chart/actions/workflows/ci.yml/badge.svg)](https://github.com/teociaps/bubble-chart/actions/workflows/ci.yml)\n\n**@teociaps/bubble-chart** is a library for creating custom animated bubble charts using **D3.js**. This package provides a flexible and customizable way to visualize data in a *bubble chart* format, with support for *animations* and *dynamic* styling.\n\n\n## Installation\nnpm:\n```bash\nnpm install @teociaps/bubble-chart\n```\nYarn:\n```bash\nyarn add @teociaps/bubble-chart\n```\n\n\n## Usage\n### Importing the Library\n\n#### ES Modules (ESM)\nIf you're using ES Modules (e.g., in a modern JavaScript project or in a TypeScript environment), you can import the library like this:\n```typescript\nimport { createBubbleChart, BubbleData, BubbleChartOptions } from '@teociaps/bubble-chart';\n```\n\n#### CommonJS (CJS)\nIf you're working in a Node.js environment or any project using CommonJS modules, you can require the library like this:\n```typescript\nconst { createBubbleChart } = require('@teociaps/bubble-chart');\n```\n\n### Creating a Bubble Chart\nThis library includes TypeScript definitions.\nHere's a basic example of how to create a bubble chart:\n\n```typescript\nimport { createBubbleChart, BubbleData, BubbleChartOptions } from '@teociaps/bubble-chart';\n\n// Sample data\nconst data: BubbleData[] = [\n  { name: 'Bubble 1', value: 10, color: 'red' },\n  { name: 'Bubble 2', value: 20, color: 'blue' },\n  { name: 'Bubble 3', value: 30, color: 'green' }\n];\n\n// Chart options\nconst options: BubbleChartOptions = {\n  titleOptions: {\n    text: 'My Bubble Chart',\n    fontSize: '18px',\n    fill: 'black'\n  },\n  showPercentages: true\n};\n\n// Create bubble chart\nlet generatedSvg = createBubbleChart(data, options, 800, 600, '#chart-container');\n```\n\n### Parameters\n- data (BubbleData[]): An array of objects representing each bubble. Each object should have the following properties:\n  - name (string): The name or label of the bubble.\n  - value (number): The value that determines the size of the bubble.\n  - color (string): The color of the bubble.\n  - icon (optional string): URL of an icon to be displayed inside the bubble.\n\n- chartOptions (BubbleChartOptions): Options for customizing the chart. This includes:\n  - titleOptions (TitleOptions): Options for the chart title.\n    - text (optional string): Title text.\n  - fontSize (optional string): Font size of the title.\n  - fontWeight (optional string): Font weight of the title.\n  - fill (optional string): Font color of the title.\n  - padding (optional object): Padding around the title. Format { top?: number, right?: number, bottom?: number, left?: number }.\n  - showPercentages (optional boolean): Whether to display percentages inside bubbles.\n\n- width (number): Width of the SVG container. Defaults to 800.\n\n- height (number): Height of the SVG container. Defaults to 600.\n\n- selector (optional string): CSS selector for the element to which the SVG will be appended. Leave out to only generate and return the SVG without appending it to your document.\n\n### Customization\nYou can customize the chart appearance by adjusting the chartOptions and titleOptions. The library also includes a createSVGDefs function that you can use to define SVG gradients and masks.\nIn addition, you can change the style of your bubble chart through the CSS, like in the demo, or manipulate the generated SVG string from the createBubbleChart function.\n\n## Development\n### Running Tests\nTo run tests, use:\n```bash\nnpm test\n```\n\n### Building the Project\nTo build the project for production, use:\n\n```bash\nnpm run build\n```\n\nTo build and watch for changes during development, use:\n```bash\nnpm start\n```\n\n### Running the Demo Locally\nStart a local server to view the demo:\n```bash\nnpm run start:demo\n```\n\n\n## Contributing\nIf you'd like to contribute to the project, please submit a [pull request](https://github.com/teociaps/bubble-chart/compare) or open an [issue](https://github.com/teociaps/bubble-chart/issues/new) on the GitHub repository.\n\n\n## License\nThis project is licensed under the MIT License. See the [License](LICENSE) file for details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteociaps%2Fbubble-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteociaps%2Fbubble-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteociaps%2Fbubble-chart/lists"}