React Bubble Chart

A combination React/D3 bubble chart that animates color/size/position when
updating data sets.

!gif

!nested

Here's a blog post I wrote on this.

For a live demo, head on over to
Election Insights. The code for that
is here, and my blog post
about it is here.

Installation

``sh
npm install react-bubble-chart
`

Use

NOTE: you must include the css rules provided in src/styles.css (also
included is a LESS file if that's your cup of tea) somewhere on your page for
this component to work properly.

ANOTHER NOTE: this component does not load in React directly (as to not
conflict with whatever version of React you're already using). As a result of
this, it will not work if you don't already have react installed in your
project.

`js
import React from 'react';
import ReactBubbleChart from 'react-bubble-chart';
import Actions from '../Actions';

var colorLegend = [
//reds from dark to light
{color: "#67000d", text: 'Negative', textColor: "#ffffff"}, "#a50f15", "#cb181d", "#ef3b2c", "#fb6a4a", "#fc9272", "#fcbba1", "#fee0d2",
//neutral grey
{color: "#f0f0f0", text: 'Neutral'},
// blues from light to dark
"#deebf7", "#c6dbef", "#9ecae1", "#6baed6", "#4292c6", "#2171b5", "#08519c", {color: "#08306b", text: 'Positive', textColor: "#ffffff"}
];

var tooltipProps = [{
css: 'symbol',
prop: '_id'
}, {
css: 'value',
prop: 'value',
display: 'Last Value'
}, {
css: 'change',
prop: 'colorValue',
display: 'Change'
}];

class BubbleChart extends React.Component {
render () {
var data = this.props.data.map(d => ({
_id: d._id,
value: d.value,
colorValue: d.sentiment,
selected: d.selected
}));

return className="my-cool-chart"
colorLegend={colorLegend}
data={data}
selectedColor="#737373"
selectedTextColor="#d9d9d9"
fixedDomain={{min: -1, max: 1}}
onClick={Actions.doStuff.bind(Actions)}
legend={true}
legendSpacing={0}
tooltip={true}
tooltipProps={tooltipProps}
tooltipFunc={tooltipFunc}
/>;
}
}

module.exports = BubbleChart;
`

To update the data, simply update the parent component that passes down the
data prop to the bubble chart.

Breakdown of Props

ReactBubbleChart uses the following props:

$3

An array of data objects (defined below) used to populate the bubble chart. Can
also be a nested JSON object if you want a nested bubble chart. That would look
like:

`js
{
_id: string,
children: [
{data object},
{data object},
{
_id: string,
children: [...]
}
]
}
`

The data objects themselves look like:

`js
{
_id: string, // unique id (required)
value: number, // used to determine relative size of bubbles (required)
displayText: string,// will use _id if undefined
colorValue: number, // used to determine color
selected: boolean, // if true will use selectedColor/selectedTextColor for circle/text
}
`

If using the tooltip feature (more on that later), you might include more
properties in this object.

$3

An array of strings (hex values) or objects that define a color and text. If
text is defined, this value will be shown in the legend.

`js
string || {
color: string,
text: string used in legend,
textColor: string (optional) - if specified will use this for the text color
when over bubbles with that color
}
`

If this is left undefined everything will render black. But fear not! we add
the css class bubble to all... bubbles and bubble leaf if it has no
children. This way if you want all bubbles to be styled the same way you can do
so with just css instead of defining a color legend array.

$3

Boolean. If true, create a legend based on the values supplied in colorLegend.

$3

Used in tandum with the color legend. If defined, the minimum number corresponds
to the minimum value in the color legend array, and the maximum corresponds to
the max. The rest of the colorValue values will use a quantized domain to find
their spot.

If this is undefined we will use the min and max of the colorValues of the
dataset.

`js
{
min: number,
max: number
}
`

$3

If true, will create a