A react wrapper over d3.js for bubble chart.
npm install react-d3-bubblesStill in development phase.
!react-d3-bubbles
To try out,
```
yarn add react-d3-bubbles # for yarn
npm i --save-dev react-d3-bubbles # for npm
Currently supported props are:
`index is must for now. However, I am trying to remove the dependency on it.
color should also be given, else the bubble will look black
data: [
{
index: 0,
name: 'Overall',
color: '#f48fb1',
radius: 56,
value: 56,
tooltip: 'tooltip 0'
}
]
And use in your component as
`
import React from "react";
import ReactBubbleChart from "react-d3-bubbles";
const data = [
{
index: 0,
name: "A",
color: "#f48fb1",
radius: 56
},
{
index: 1,
name: "B",
color: "#ffab91",
radius: 34
},
{
index: 2,
name: "C",
color: "#b87fe9",
radius: 32
},
{
index: 3,
name: "D",
color: "#64b5f6",
radius: 32
},
{
index: 4,
name: "E",
color: "#81c784",
radius: 18
},
{
index: 5,
name: "F",
color: "#f48fb1",
radius: 19
},
{
index: 6,
name: "G",
color: "#64b5f6",
radius: 22
}
];class Dashboard extends React.Component {
render() {
return (
;
);
}
}
export default Dashboard;
`Development
To get started, clone this repo and run the following commands:
`
in this repo:
npm i
npm run build
npm link # npm link will be used to dev-test our component in our testing-project while we are developing it.
in the test repo:
git clone git@github.com:absk1317/react-d3-bubbles-test.git # if not done already
npm install
npm link react-fancy-component
npm run start
Now you can see the changes that you do in at http://localhost:3000
Remember to do a
npm run build everytime you change anything in the react bubbles repo
``