React Bubble Chart using D3

ReactJS component to display data as a bubble chart using d3.

As you will be able to see in test in order to use the component we need to importe it as:

import BubbleChart from '@weknow/react-bubble-chart-d3';

Then, in the render method we can just call it like:

bubbleClick = (label) =>{ console.log("Custom bubble click func") } legendClick = (label) =>{ console.log("Customer legend click func") } <BubbleChart graph= {{ zoom: 1.1, offsetX: -0.05, offsetY: -0.01, }} width={1000} height={800} padding={0} // optional value, number that set the padding between bubbles showLegend={true} // optional value, pass false to disable the legend. legendPercentage={20} // number that represent the % of with that legend going to use. legendFont={{ family: 'Arial', size: 12, color: '#000', weight: 'bold', }} valueFont={{ family: 'Arial', size: 12, color: '#fff', weight: 'bold', }} labelFont={{ family: 'Arial', size: 16, color: '#fff', weight: 'bold', }} //Custom bubble/legend click functions such as searching using the label, redirecting to other page bubbleClickFunc={this.bubbleClick} legendClickFun={this.legendClick} data={[ { label: 'CRM', value: 1 }, { label: 'API', value: 1 }, { label: 'Data', value: 1 }, { label: 'Commerce', value: 1 }, { label: 'AI', value: 3 }, { label: 'Management', value: 5 }, { label: 'Testing', value: 6 }, { label: 'Mobile', value: 9 }, { label: 'Conversion', value: 9 }, { label: 'Misc', value: 21 }, { label: 'Databases', value: 22 }, { label: 'DevOps', value: 22 }, { label: 'Javascript', value: 23 }, { label: 'Languages / Frameworks', value: 25 }, { label: 'Front End', value: 26 }, { label: 'Content', value: 26 }, ]} />

The data prop receive and array of objects:

{ 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:

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':

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:

// 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:

npm install @weknow/react-bubble-chart-d3