@domoinc/people-bubbles

PeopleBubbles

Forced layout of multi-series circles with people's pictures with colored outline, with label, and tooltip. Can also move bubbles around with mouse. If there's no picture, there is a default avatar and their name.

Configuration Options

baseImageURL

Type: string
Default: "http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/"

A URL string that indicates the base URL to use when looking for images.

chartName

Type: string
Default: "PeopleBubbles"

Name of chart for Reporting.

chartPrimarySeriesColors

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

colorScale

Type: scale
Default: ""

The color scale for the bubbles.

forceEnabled

Type: boolean
Default: true

Boolean that enables or disables the forces on the bubbles.

generalWashoutColor

Type: color
Default: "#E4E5E5"

Color used to indicate elements that are not being highlighted

height

Type: number
Default: 400
Units: px

Height of the widget

isOnMobile

Type: boolean
Default: false

If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.

maxDataSize

Type: number
Default: 35

The max amount of data rows used for this widget.

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textFontFamily

Type: string
Default: "Open Sans"

tooltipBackgroundColor

Type: color
Default: "#555555"

Background color of the tooltip

tooltipTextColor

Type: color
Default: "#FFFFFF"

Color of the tooltip text

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 400
Units: px

Width of the widget

Data Definition

category

Type: string

Default validate:

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

Default accessor:

function (line) { return line[2] === null || line[2] === undefined? undefined : String(line[2]); }

id

Type: string

Default validate:

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

Default accessor:

function (line) { return line[1] === null || line[1] === undefined? undefined : String(line[1]); }

name

Type: string

Default validate:

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

Default accessor:

function (line) { return line[0] === null || line[0] === undefined ? undefined : String(line[0]); }

value

Type: number

Default validate:

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

Default accessor:

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

Events

Dispatch Events

dispatch:mouseenter
dispatch:mouseout

External Events

Example

var data = [
  // Name, ID(Extension of Base URL for Image), Category, Value
  ['Moe Rogerson', 'fauxmosapien-male-15-90.jpg', 'Marketing', 204000],
  ['Lyle Simpson', 'fauxmosapien-male-20-90.jpg', 'Finance', 177002],
  ['Tucker House', 'fauxmosapien-male-18-90.jpg', 'Development', 121000],
  ['Lizette Styles', 'fauxmosapien-female-19-90.jpg', 'Sales', 162000],
  ['Tiffani Tuft', 'fauxmosapien-female-10-90.jpg', 'Marketing', 216001],
  ['Sophy Brand', 'fauxmosapien-female-20-90.jpg', 'Development', 152000],
  ['Brayden Sargent', 'fauxmosapien-male-10-90.jpg', 'Development', 142300],
  ['Rowan Darby', 'fauxmosapien-male-21-90.jpg', 'Marketing', 100000]
];
var dataObject = [
  {name: 'Moe Rogerson', image: 'fauxmosapien-male-15-90.jpg', department: 'Marketing', value: 204000},
  {name: 'Lyle Simpson', image: 'fauxmosapien-male-20-90.jpg', department: 'Finance', value: 177002},
  {name: 'Tucker House', image: 'fauxmosapien-male-18-90.jpg', department: 'Development', value: 121000},
  {name: 'Lizette Styles', image: 'fauxmosapien-female-19-90.jpg', department: 'Sales', value: 162000},
  {name: 'Tiffani Tuft', image: 'fauxmosapien-female-10-90.jpg', department: 'Marketing', value: 216001},
  {name: 'Sophy Brand', image: 'fauxmosapien-female-20-90.jpg', department: 'Development', value: 152000},
  {name: 'Brayden Sargent', image: 'fauxmosapien-male-10-90.jpg', department: 'Development', value: 142300},
  {name: 'Rowan Darby', image: 'fauxmosapien-male-21-90.jpg', department: 'Marketing', value: 100000}
];

var svg = d3.select("#vis")
  .append("svg")
  .style({
    position: 'absolute',
    'top': '0px',
    'left': '0px'
  })
  .attr("width", 550 + 'px')
  .attr("height", 550 + 'px')
  .append('g')

var chart = svg
  .append("g")
  .chart("PeopleBubbles")
  .accessors('name', function(d) {
    return d.name;
  })
  .accessors('id', function(d) {
    return d.image;
  })
  .accessors('category', function(d) {
    return d.department;
  })
  .accessors('value', function(d) {
    return d.value;
  })
  .config('width', 500)
  .config('height', 500)
  .config('baseImageURL', 'https://s3.amazonaws.com/Domo_infographic/fauxmosapiens/')
  .c('generalWashoutColor', '#334499');

chart._notifier.showMessage(true);
chart.draw(dataObject);