react-tooltip-bubble-chart

!FILES
!LICENSE
!DOWNLOADS

This is a bubble chart component that includes a tooltip using d3. I created a component based on React and Typescript by referring to the open source Draw a bubble chart. When the mouse hovers over the bubble chart object, the contents inside the bubble chart are displayed as a tooltip. You can also customize the movement of the bubble chart through the move setting. This library can be an excellent choice for data visualization. I hope this is what you were looking for.

✨ Features

- ✌ Written TypeScript
- ✅ Available in React
- 💬 Possible Fine text alignment
- 🌀 Available Interactive motion
- 💅 Can Custom each bubble chart object
- 🌟 Can check the contents of the object as a tooltip

🔧 Installation

``bash
npm install react-tooltip-bubble-chart #npm
`

📦 Example

!Example

`tsx
import "./App.css";
import BubbleChart from "react-tooltip-bubble-chart";

function Example() {
const bubbleData = [
{
fillColor: "rgb(52, 202, 173, 0.3)",
id: 5,
name: "Setting\nme",
size: 50,
dYdX1: { dy: -2, dx: -3 },
dYdX2: { dy: 8, dx: -20 },
},
{
fillColor: "rgb(52, 202, 173, 0.3)",
id: 6,
name: "Getting\nStart",
size: 120,
dYdX1: { dy: -2, dx: -4 },
},
{
fillColor: "rgb(52, 202, 173, 0.3)",
id: 7,
name: "Setting\nme",
size: 50,
dYdX1: { dy: -2, dx: -3 },
dYdX2: { dy: 8, dx: -20 },
},
];

return (


export default Example;
`

✔ Bubble Chart DataType

`tsx
export namespace BubbleChartTypes {
export type Data = {
fillColor: string;
id: number;
name: string;
size: number;
dYdX1: { dy: number; dx: number };
dYdX2: { dy: number; dx: number };
dYdX3: { dy: number; dx: number };
};
}
`

👀 Props

| Prop | Description | Type | Test |
| ----------------- | ------------------------------------------------------------ | --------- | ------------- |
| bubblesData | An array of text and setting values ​​for the bubble chart | array | bubblesData[] |
| move | Bubble chart animation settings dropdown | boolean | true |
| width | Width of the entire area of ​​the bubble chart | number | 700 |
| height | Height of the entire area of ​​the bubble chart | number | 470 |
| backgroundColor | Set background color behind bubble chart | string | white |
| textFillColor | Change the color of the text inside the bubble chart | string | #717C84 |
| minValue | Bubble chart minimum weight value | number | 1 |
| maxValue | Bubble chart maximum weight value callback | number | 150 |

⭕ Test

If you need intuitive usage, you can try this library right away through Storybook. You can check the operation more intuitively. Please refer to the information below.

✨Awsome Storybook Page✨

If you want to run it yourself, follow the command below.

`bash
cd /storybook && npm run storybook
``

📜 License

MIT License