{"id":24092788,"url":"https://github.com/weknowinc/react-bubble-chart-d3","last_synced_at":"2025-04-09T14:15:30.807Z","repository":{"id":55115602,"uuid":"121285785","full_name":"weknowinc/react-bubble-chart-d3","owner":"weknowinc","description":"React Bubble Chart using D3","archived":false,"fork":false,"pushed_at":"2023-12-14T15:18:59.000Z","size":1128,"stargazers_count":57,"open_issues_count":16,"forks_count":55,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-23T11:55:33.148Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/weknowinc.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":"2018-02-12T18:35:38.000Z","updated_at":"2024-06-18T18:40:49.216Z","dependencies_parsed_at":"2024-06-18T18:40:25.963Z","dependency_job_id":"57b6b555-3e2c-4abe-a988-18dd017eab4b","html_url":"https://github.com/weknowinc/react-bubble-chart-d3","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weknowinc%2Freact-bubble-chart-d3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weknowinc%2Freact-bubble-chart-d3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weknowinc%2Freact-bubble-chart-d3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weknowinc%2Freact-bubble-chart-d3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weknowinc","download_url":"https://codeload.github.com/weknowinc/react-bubble-chart-d3/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054194,"owners_count":21039952,"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":[],"created_at":"2025-01-10T08:50:02.798Z","updated_at":"2025-04-09T14:15:30.759Z","avatar_url":"https://github.com/weknowinc.png","language":"JavaScript","readme":"# react-bubble-chart-d3\nReactJS component to display data as a bubble chart using d3.\n\n### Preview\n\n![Bubble Chart D3](https://user-images.githubusercontent.com/4070505/36446619-834c38b0-1647-11e8-976d-9930b8a3835b.png)\n\n### General Usage\n\nAs you will be able to see in [test](test/src/App.js) in order to use the component we need to importe it as:\n```JAVASCRIPT\nimport BubbleChart from '@weknow/react-bubble-chart-d3';\n```\n\nThen, in the render method we can just call it like:\n\n```JAVASCRIPT\nbubbleClick = (label) =\u003e{\n  console.log(\"Custom bubble click func\")\n}\nlegendClick = (label) =\u003e{\n  console.log(\"Customer legend click func\")\n}\n\u003cBubbleChart\n  graph= {{\n    zoom: 1.1,\n    offsetX: -0.05,\n    offsetY: -0.01,\n  }}\n  width={1000}\n  height={800}\n  padding={0} // optional value, number that set the padding between bubbles\n  showLegend={true} // optional value, pass false to disable the legend.\n  legendPercentage={20} // number that represent the % of with that legend going to use.\n  legendFont={{\n        family: 'Arial',\n        size: 12,\n        color: '#000',\n        weight: 'bold',\n      }}\n  valueFont={{\n        family: 'Arial',\n        size: 12,\n        color: '#fff',\n        weight: 'bold',\n      }}\n  labelFont={{\n        family: 'Arial',\n        size: 16,\n        color: '#fff',\n        weight: 'bold',\n      }}\n  //Custom bubble/legend click functions such as searching using the label, redirecting to other page\n  bubbleClickFunc={this.bubbleClick}\n  legendClickFun={this.legendClick}\n  data={[\n    { label: 'CRM', value: 1 },\n    { label: 'API', value: 1 },\n    { label: 'Data', value: 1 },\n    { label: 'Commerce', value: 1 },\n    { label: 'AI', value: 3 },\n    { label: 'Management', value: 5 },\n    { label: 'Testing', value: 6 },\n    { label: 'Mobile', value: 9 },\n    { label: 'Conversion', value: 9 },\n    { label: 'Misc', value: 21 },\n    { label: 'Databases', value: 22 },\n    { label: 'DevOps', value: 22 },\n    { label: 'Javascript', value: 23 },\n    { label: 'Languages / Frameworks', value: 25 },\n    { label: 'Front End', value: 26 },\n    { label: 'Content', value: 26 },\n  ]}\n/\u003e\n```\n\nThe **data** prop receive and array of objects:\n```javascript\n{\n  label: 'label', // Text to display.\n  value: 1, // Numeric Value.\n  /**\n    Color of the circle this value it's optional,\n    accept hex (#ff0000) and string (red) name values.\n    If you don't provide a value the default behavior\n    is assign a color based on a d3.schemeCategory20c\n    color schema.\n  */\n  color: '#ff00ff',\n}\n```\n\nThe **graph** prop receive a configuration object to set the zoom and offset of the bubbles:\n```javascript\ngraph: {\n  zoom: 1.1, // 1.1 means 110% of zoom.\n  offsetX: -0.05, // -0.05 means that the offset is -5% of the graph width.\n  offsetY: -0.01,\n}\n```\n\nThe **overflow** prop receive a boolean value if you want to make bubbles visible beyond its SVG element bounday.\nThe default value is set to 'false':\n```javascript\noverflow={true}\n```\n\nThe **legendFont**, **valueFont** and **labelFont** prop receive a configuration object to set the font-family, font-size, font-weight and color of the text:\n```javascript\n// If you don't set this prop the default configuration will be this object.\n{\n  family: 'Arial',\n  size: 12,\n  color: '#000',\n  weight: 'bold',\n  // lineColor and lineWeight are optionals. use only to add a border line to the text.\n  lineColor: \"#3f3f3f\",\n  lineWeight: 2,\n}\n```\n\n### Installation\n\nInstall this component is easy, just use npm as:\n```BASH\nnpm install @weknow/react-bubble-chart-d3\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweknowinc%2Freact-bubble-chart-d3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweknowinc%2Freact-bubble-chart-d3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweknowinc%2Freact-bubble-chart-d3/lists"}