@domoinc/bubbles-by-category-filled

BubblesByCategoryFilled

Configuration Options

bodyFontFamily

Type: string
Default: "Open Sans"

bubbleTextColor

Type: color
Default: "#fff"

Used when Color Theme is not set to Domo

collisionDetection

Type: boolean
Default: true

Whether or not to use collision detection

dance

Type: boolean
Default: false

Whether or not to continually move the circles randomly

friction

Type: number
Default: 0.8

Amount of friction force

generalNotFilledColor

Type: color
Default: "#ffffff"

Text color when another circle series is being hovered on

gravity

Type: number
Default: 0.6

Amount of gravity force

hasLabels

Type: boolean
Default: true

Whether or not to show the labels

hasSeriesData

Type: boolean
Default: true

Whether or not it has series data

hasTooltip

Type: boolean
Default: true

Whether or not to show the tooltip

height

Type: number
Default: 400
Units: px

Height of the widget

initialAnimation

Type: string
Default: "default"

Type of animation to start with

isDraggable

Type: boolean
Default: true

Whether or not the circles are draggable

layout

Type: string
Default: "default"

Type of layout

mapRangeColorsTheme

Type: select
Default: {"name":"Domo","value":[]}

The color theme used by the elements

minBubbleSize

Type: number
Default: 0

Smallest diameter for bubbles in pixels

outerCircleColor

Type: color
Default: "none"

Color of the outer circles

primaryColorSeries

Type: colorArray
Default: [["#D9EBFD","#B7DAF5","#90c4e4","#73B0D7","#4E8CBA","#31689B"],["#DDF4BA","#BBE491","#A0D771","#80C25D","#559E38","#387B26"],["#FDECAD","#FCCF84","#FBAD56","#FB8D34","#E45621","#A43724"],["#F3E4FE","#DDC8EF","#C5ACDE","#B391CA","#8F6DC0","#7940A1"],["#FCD7E6","#FBB6DD","#F395CD","#EE76BF","#CF51AC","#A62A92"],["#D8F4DE","#ABE4CA","#8DD5BE","#68BEA8","#46998A","#227872"],["#FDDDDD","#FCBCB7","#FD9A93","#FD7F76","#e45850","#c92e25"]]

The primary colors used to represent series data

secondaryColorSeries

Type: colorArray
Default: ["#4E8CBA","#D9EBFD","#31689B","#D9EBFD","#D9EBFD","#559E38","#DDF4BA","#387B26","#DDF4BA","#DDF4BA","#E45621","#FDECAD","#A43724","#FDECAD","#FDECAD","#FDECAD"]

The secondary colors used to represent series data

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showInnerCircles

Type: boolean
Default: false

Whether or not to show the inner circles

startInOrder

Type: boolean
Default: false

Whether or not to put the circles in order (works best with horizontal layout)

strokeWidth

Type: number
Default: 0

Stroke width

tooltipBackgroundColor

Type: color
Default: "#555555"

tooltipFontColor

Type: color
Default: "#FFFFFF"

tooltipFontSize

Type: number
Default: 14
Units: px

Text size of the tooltip

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

washoutColor

Type: color
Default: "#F1F2F2"

Bubble color when another circle series is being hovered on

width

Type: number
Default: 400
Units: px

Width of the widget

Data Definition

Label

Type: string

Default validate:

function (d) { return this.accessor(d) !== 'undefined'; }

Default accessor:

function (line) { return String(line[0]); }

Series

Type: string

Default validate:

function (d) { return _Chart.c('hasSeriesData') ? this.accessor(d) !== undefined : true; }

Default accessor:

function (line) {
	          return _Chart.c('hasSeriesData') ?
	            line[2] && line[2] !== '' ? String(line[2]) : undefined : _Chart.a('Label')(line);
	        }

Value

Type: number

Default validate:

function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) > 0; }

Default accessor:

function (line) { return Number(line[1]); }

innerValue

Type: string

Default validate:

function (d) {
	          return this.accessor(d) !== undefined;
	        }

Default accessor:

function (line) {
	          return Number(line[3]);
	        }

Events

Dispatch Events

dispatch:click
dispatch:mouseover
dispatch:mouseout

External Events

external:mouseenter
external:mouseleave

Example

var data = [
  ['Moe Rogerson', 204000, 'Marketing'],
  ['Lyle Simpson', 177002, 'Finance'],
  ['Tucker House', 121000, 'Development'],
  ['Lizette Styles', 162000, 'Sales'],
  ['Tiffani Tuft', 216001, 'Marketing'],
  ['Sophy Brand', 152000, 'Development'],
  ['Brayden Sargent', 142300, 'Development'],
  ['Rowan Darby', 100000, 'Marketing']
];
var singleData = [
  ['Moe Rogerson', 204000],
  ['Lyle Simpson', 177002],
  ['Tucker House', 121000],
  ['Lizette Styles', 162000],
  ['Tiffani Tuft', 216001],
  ['Sophy Brand', 152000],
  ['Brayden Sargent', 142300],
  ['Rowan Darby', 100000]
];
var dataObject = [
  {name: 'Moe Rogerson', department: 'Marketing', value: 204000},
  {name: 'Lyle Simpson', department: 'Finance', value: 177002},
  {name: 'Tucker House', department: 'Development', value: 121000},
  {name: 'Lizette Styles', department: 'Sales', value: 162000},
  {name: 'Tiffani Tuft', department: 'Marketing', value: 216001},
  {name: 'Sophy Brand', department: 'Development', value: 152000},
  {name: 'Brayden Sargent', department: 'Development', value: 142300},
  {name: 'Rowan Darby', department: 'Marketing', value: 100000}
];

var height = 400;
var width  = 400;

//Setup SVG
var svg = d3.select('#vis')
  .append('svg')
  .attr('height', '500px')
  .attr('width', '500px');

//Added Chart
var chart = svg.append('g')
  .attr('transform', 'translate(50,50)')
  .chart('BubblesByCategoryFilled')
  // .accessors({
  //   'Label': function(d) {
  //     return d.name;
  //   },
  //   'Series': function(d) {
  //     return d.department;
  //   },
  //   'Value': function(d) {
  //     return d.value;
  //   }
  // })
  .c({
    height: height,
    width: width,
    tooltipFontSize: 14,
    // hasLabels: false
    // hasTooltip: false,
    // hasSeriesData: false
    //gravity: 0.5,
    //friction: 0.1,

    //tooltipBackgroundColor: 'red',
    //textFontFamily:'Comic Sans MS'
    //isDraggable: false,
    //collisionDetection: false
  });

chart.draw(data);

//setTimeout(function() {
//  chart.trigger('external:mouseenter', {series:'Development', name:'Development'});
//},1500);
//
//setTimeout(function() {
//  chart.trigger('external:mouseenter', {series:'Marketing', name:'Tiffani Tuft'});
//},2500);
//
//setTimeout(function() {
//  chart.trigger('external:mouseleave');
//},3500);