react-tooltip-bubble-chart

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

npm install react-tooltip-bubble-chart #npm

📦 Example

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 (
    <div>
      <BubbleChart
        bubblesData={bubbleData}
        width={700}
        height={470}
        textFillColor="#717C84"
        backgroundColor="white"
        minValue={1}
        maxValue={150}
        move={true}
      />
    </div>
  );
}

export default Example;

✔ Bubble Chart DataType

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.

  cd /storybook && npm run storybook

📜 License

MIT License