react-d3-bubbles
v1.2.1
Published
A react wrapper over d3.js for bubble chart.
Downloads
32
Maintainers
Readme
React Bubbles with help of d3.js
Still in development phase.
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'
}
]
# Note: Everything that you want to modify per bubble, has to be given inside data.
# Default props are:
data: [
{
index: 0,
name: 'A',
value: '0',
tooltip: 'A',
color: '#f48fb1',
radius: 56
},
{
index: 1,
name: 'B',
value: '1',
tooltip: 'B',
color: '#ffab91',
radius: 34
},
{
index: 2,
name: 'C',
value: 2,
tooltip: 'C',
color: '#b87fe9',
radius: 32
},
{
index: 3,
name: 'D',
value: 3,
tooltip: 'D',
color: '#64b5f6',
radius: 32
},
{
index: 4,
name: 'E',
value: 4,
tooltip: 'E',
color: '#4dd0e1',
radius: 31.5
},
{
index: 5,
name: 'F',
value: 5,
tooltip: 'F',
color: '#f48fb1',
radius: 31
},
{
index: 6,
name: 'G',
value: 6,
tooltip: 'G',
color: '#81c784',
radius: 28
},
{
index: 7,
name: 'H',
value: 7,
tooltip: 'H',
color: '#f48fb1',
radius: 24
},
{
index: 8,
name: 'I',
value: 8,
tooltip: 'I',
color: '#64b5f6',
radius: 32
}
],
width: 400,
height: 250,
center: { x: 200, y: 125 },
forceStrength: 0.03
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 (
<div className="col-md-35 mb-20">
<ReactBubbleChart data={data} />;
</div>
);
}
}
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 [email protected]: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