Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/weknowinc/react-bubble-chart-d3
React Bubble Chart using D3
https://github.com/weknowinc/react-bubble-chart-d3
Last synced: about 7 hours ago
JSON representation
React Bubble Chart using D3
- Host: GitHub
- URL: https://github.com/weknowinc/react-bubble-chart-d3
- Owner: weknowinc
- License: mit
- Created: 2018-02-12T18:35:38.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-14T15:18:59.000Z (about 1 year ago)
- Last Synced: 2024-04-23T11:55:33.148Z (9 months ago)
- Language: JavaScript
- Size: 1.08 MB
- Stars: 57
- Watchers: 3
- Forks: 55
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-bubble-chart-d3
ReactJS component to display data as a bubble chart using d3.
### Preview
### General Usage
As you will be able to see in [test](test/src/App.js) in order to use the component we need to importe it as:
```JAVASCRIPT
import BubbleChart from '@weknow/react-bubble-chart-d3';
```
Then, in the render method we can just call it like:
```JAVASCRIPT
bubbleClick = (label) =>{
console.log("Custom bubble click func")
}
legendClick = (label) =>{
console.log("Customer legend click func")
}
```
The **data** prop receive and array of objects:
```javascript
{
label: 'label', // Text to display.
value: 1, // Numeric Value.
/**
Color of the circle this value it's optional,
accept hex (#ff0000) and string (red) name values.
If you don't provide a value the default behavior
is assign a color based on a d3.schemeCategory20c
color schema.
*/
color: '#ff00ff',
}
```
The **graph** prop receive a configuration object to set the zoom and offset of the bubbles:
```javascript
graph: {
zoom: 1.1, // 1.1 means 110% of zoom.
offsetX: -0.05, // -0.05 means that the offset is -5% of the graph width.
offsetY: -0.01,
}
```
The **overflow** prop receive a boolean value if you want to make bubbles visible beyond its SVG element bounday.
The default value is set to 'false':
```javascript
overflow={true}
```
The **legendFont**, **valueFont** and **labelFont** prop receive a configuration object to set the font-family, font-size, font-weight and color of the text:
```javascript
// If you don't set this prop the default configuration will be this object.
{
family: 'Arial',
size: 12,
color: '#000',
weight: 'bold',
// lineColor and lineWeight are optionals. use only to add a border line to the text.
lineColor: "#3f3f3f",
lineWeight: 2,
}
```
### Installation
Install this component is easy, just use npm as:
```BASH
npm install @weknow/react-bubble-chart-d3
```