@domoinc/scatter-plot-chart v2.0.4

ScatterPlotChart

Creates a scatter plot chart

Configuration Options

axesLabelColor

Type: color
Default: "#888"

Color of all the labels on the axes

axesLabelFontFamily

Type: string
Default: "Open Sans"

Font family for axes labels

axesLabelSize

Type: number
Default: 11
Units: px

Size of the labels

axesLineColor

Type: color
Default: "#E3E3E3"

Color of all lines found in the axes

chartName

Type: string
Default: "ScatterPlotChart"

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

dateTimeFormat

Type: string
Default: "YYYY-MM-DD HH:mm"

Format that the date and time are coming in, if using time data on the X scale.

dateTimeOutputFormat

Type: string
Default: "YYYY-MM-DD"

Format of X axis date/time labels, if using time data on the X scale.

generalWashoutColor

Type: color
Default: "#E4E5E5"

Fill color of any bubble that is not being hovered.

height

Type: number
Default: 250
Units: px

maxR

Type: number
Default: 15
Units: px

Max bubble radius. The max data point will scale to this size.

minR

Type: number
Default: 5
Units: px

Min bubble radius. The min data point will scale to this size.

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 250
Units: px

xAxisTickSpacing

Type: number
Default: 50
Units: px

Suggested amount of padding to put in between each tick mark, may get more or less.

xScaleType

Type: string
Default: "automatic"

Type of xScale

yAxisTickSpacing

Type: number
Default: 50
Units: px

Suggested amount of padding to put in between each tick mark, may get more or less.

Data Definition

Color

Type: string

Default validate:

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

Default accessor:

function (line) {
	          return line[3] === undefined ? undefined : String(line[3]);
	        }

Size

Type: number

Default validate:

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

Default accessor:

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

XValue

Type: number

Default validate:

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

Default accessor:

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

YValue

Type: number

Default validate:

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

Default accessor:

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

Events

Dispatch Events

External Events

Example

//Setup some fake data
var dataLinear = [
  [10, 2, 3, 'North'],
  [20, 5, 6, 'South'],
  [50, 8, 9, 'East'],
  [60, 14, 15, 'West']
];

var dataTime = [
  ['2015-01-01', 2, 3, 'North'],
  ['2015-02-01', 5, 6, 'South'],
  ['2015-03-01', 8, 9, 'East'],
  ['2015-04-01', 14, 15, 'West']
];

var dataOrdinal = [
  ['Jan', 2, 3, 'North'],
  ['Feb', 5, 6, 'South'],
  ['Mar', 8, 9, 'East'],
  ['Apr', 14, 15, 'West']
];

var chart = d3.select('#vis')
  .append('svg')
  .attr({
    'width': 500,
    'height': 400
  })
  .append('g')
  .attr('transform', 'translate(50, 50)')
  .chart('ScatterPlotChart')
  .c({
    'width': 400,
    'height': 300,
    'xAxisTickSpacing': 60,
    'xScaleType': 'ordinal'
  });

chart.draw(dataOrdinal);