@domoinc/people-bubbles-xy v2.1.3
PeopleBubblesXAndY
Configuration Options
axesLabelColor
Type: color
Default: "#8A8D8E"
Font color for the axes labels
axesLabelSize
Type: number
Default: 11
Units: px
Font size for the axes labels
axesLineColor
Type: color
Default: "#E3E3E3"
Line color for the axes
baseImageURL
Type: string
Default: "https://s3.amazonaws.com/Domo_infographic/fauxmosapiens/"
URL for the image minus the ID
chartName
Type: string
Default: "PeopleBubblesXAndY"
Name of chart for Reporting.
generalWashoutColor
Type: color
Default: "#E4E5E5"
Fill color that indicates something is not 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.
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
textFontFamily
Type: string
Default: "Open Sans"
Font type for the text
tooltipBackgroundColor
Type: color
Default: "#555555"
Background color for the tooltip
tooltipTextColor
Type: color
Default: "#FFFFFF"
Font color for 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
xAddBaseline
Type: select
Default: {"name":"Show","value":true}
Show or hide the X axis (the horizontal line immediately above the X axis labels)
xAddGridlines
Type: select
Default: {"name":"Hide","value":false}
Show or hide the X axis gridlines
xAddLabels
Type: select
Default: {"name":"Show","value":true}
Show or hide the X axis labels
xAddTicks
Type: select
Default: {"name":"Hide","value":false}
Show or hide the X axis tick marks
xAddZeroline
Type: select
Default: {"name":"Hide","value":false}
Show or hide the X axis zeroline (the vertical line perpendicular to the 0 value on the X axis)
yAddBaseline
Type: select
Default: {"name":"Hide","value":false}
Show or hide the Y axis (the horizontal line immediately adjacent to the Y axis labels)
yAddGridlines
Type: select
Default: {"name":"Show","value":true}
Show or hide the Y axis gridlines
yAddLabels
Type: select
Default: {"name":"Show","value":true}
Show or hide the Y axis labels
yAddTicks
Type: select
Default: {"name":"Hide","value":false}
Show or hide the Y axis tick marks
yAddZeroline
Type: select
Default: {"name":"Hide","value":false}
Show or hide the Y axis zeroline (the horizontal line perpendicular to the 0 value on the Y axis)
Data Definition
Category
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }Default accessor:
function (line) { return line[2] === undefined ? undefined : String(line[2]); }Name
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }Default accessor:
function (line) { return line[0] === undefined ? undefined : String(line[0]); }URLId
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }Default accessor:
function (line) { return line[1] === undefined ? '' : String(line[1]); }Value
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }Default accessor:
function (line) { return Number(line[3]); }x4
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }Default accessor:
function (line) { return Number(line[4]); }x5
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }Default accessor:
function (line) { return Number(line[5]); }Events
Dispatch Events
dispatch:mouseenter
dispatch:mouseout
External Events
Example
/*----------------------------------------------------------------------------------
Create Widget -> index.html
© 2011 - 2015 DOMO, INC.
----------------------------------------------------------------------------------*/
//Setup some fake data
var data = [
// Name, id(Extension of Base URL for Img), category, value, x(4), y(5)
["Moe Rogerson", 'fauxmosapien-male-15-90.jpg', "Marketing" , 204000 , 10, 9 ],
["Lyle Simpson", 'fauxmosapien-male-20-90.jpg', "Finance" , 177002 , 9, 10 ],
["Tucker House", 'fauxmosapien-male-18-90.jpg', "Development" , 121000 , 8, 7 ],
["Lizette Styles", 'fauxmosapien-female-19-90.jpg', "Sales" , 162000 , 7, 9 ],
["Tiffani Tuft", 'fauxmosapien-female-10-90.jpg', "Marketing" , 216001 , 6, 8 ],
["Sophy Brand", 'fauxmosapien-female-20-90.jpg', "Development" , 152000 , 5, 7.5],
["Brayden Sargent", 'fauxmosapien-male-01-90.jpg', "Development" , 142300 , 0, 6 ],
["Rowan Darby", 'fauxmosapien-male-04-90.jpg', "Marketing" , 100000 , 0, 6 ]
];
//Initialze the widget
var aHeight = 400;
var aWidth = 400;
var svg = d3.select('#vis').append('svg')
.attr('height', '1000px')
.attr('width', '1000px')
var chart = svg
.append('g')
.attr('transform', 'translate(62,59)')
.chart('PeopleBubblesXAndY')
.c({
width: aWidth,
height: aHeight,
baseImageURL: 'https://s3.amazonaws.com/Domo_infographic/fauxmosapiens/',
})
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);