ConnectedScatterPlot.md

ConnectedScatterPlot Component

mark Object in Graph Props

'mark': {
  'position': {
    'x': {
      'field': 'Cars',
    },
    'y': {
      'field': 'Trucks',
    },
    'z': {
      'field': 'Bikes',
    }
  },
  'points': {
    'type': 'sphere',
    'style': {
      'radius': {
        'value': 0.05,
      },
      'fill': {
        'opacity': 1,
        'color': 'red',
      },
    },
  },
  'line': {
    'style': {
      'stroke': {
        'color': 'black',
        'opacity': 1,
      },
    },
  },
  'label': {
    'field': 'Year',
    'style': {
      'color': 'black',
      'fontSize': 2,
      'opacity': 1,
    },
  }
}

Properties for mark for Connected Scatter Plot

Property	Type	Description
type	string	Defines type of point that would be created. Not Required. Default value: box. Available values: box, cone or cylinder.
class	function	Returns the class (html class) for the point as a function of the data. If space in present then the 2 string with space in between will be taken as different classes. Classes cannot begin with a number and nust not contain any special characters expect. This can be used for animating or creating interactions with the point. Not Required.
id	function	Returns the id (html id) for the point as a function of the data. If space in present then the 2 string with space in between will be taken as different id. ids cannot begin with a number and nust not contain any special characters expect. No 2 ids must be same as id acts as a unique identifier. This can be used for animating or creating interactions with the point. Not Required.
position	object	Defines the how the position of points will be mapped. Required
position.x	object	Required.
position.x.field	string	Defines the field in the data that will be mapped as x position. Required.
position.x.domain	float	Defines the domain for x position. Not Required. If not present the domain is calculated from the provided data depending on the position.x.scaleType.
position.x.startFromZero	boolean	Defines if the domain starts from 0 or not. Not Required. Default value: false Only applicable if position.x.domain is not given and position.x.scaleType is linear.
position.y	object	Required.
position.y.field	string	Defines the field in the data that will be mapped as y position. Required.
position.y.domain	array	Defines the domain for y position. Not Required. If not present the domain is calculated from the provided data depending on the position.y.scaleType.
position.y.startFromZero	boolean	Defines if the domain starts from 0 or not. Not Required. Default value: false Only applicable if position.y.domain is not given and position.y.scaleType is linear.
position.z	object	Required.
position.z.field	string	Defines the field in the data that will be mapped as z position. Required.
position.z.domain	array	Defines the domain for z position. Not Required. If not present the domain is calculated from the provided data depending on the position.z.scaleType.
position.z.startFromZero	boolean	Defines if the domain starts from 0 or not. Not Required. Default value: false Only applicable if position.z.domain is not given and position.z.scaleType is linear.
points	object	Defines the style of the points in connected scatter plot. Required.
points.type	string	Defines the type for the point. Not Required. Default value: sphere. Available values: box or sphere.
points.style	object	Defines the style of the point. Not Required.
points.style.radius	object	Defines the radius of the point. Not Required.
points.style.radius.scaleType	string	Defines the scale type for radius of the points. Not Required. If not present then a constant color that is defined is filled in the points. Available values: linear or ordinal.
points.style.radius.domain	array	Defines the domain for radius. Not Required. If not present the domain is calculated from the provided data depending on the points.style.radius.scaleType
points.style.radius.startFromZero	boolean	Defines if the domain starts from 0 or not. Not Required. Default value: false Only applicable if points.style.radius.color is not given and points.style.radius.scaleType is linear.
points.style.radius.value	float or array	Defines the value radius of the point. Not Required. Default value: 0.05 Array is required if points.style.radius.scaleType is present else its a float.
points.style.fill	object	Defines the fill of the points. Not Required.
points.style.fill.opacity	float	Defines the opacity of the points. Not Required. Default value: 1 Value must be between 0 and 1.
points.style.fill.scaleType	string	Defines the scale type for fill of the points. Not Required. If not present then a constant color that is defined is filled in the points. Available values: linear or ordinal.
points.style.fill.field	string	Defines the field in the data that will be mapped as fill of the points. Required if points.style.fill.scaleType is present.
points.style.fill.domain	array	Defines the domain for fill. Not Required. If not present the domain is calculated from the provided data depending on the points.style.fill.scaleType
points.style.fill.color	array or string	Defines the color for fill. Not Required. Default value: If points.style.fill.scaleType is present default value is d3.schemeCategory10 esle default value is "#ff0000" If points.style.fill.scaleType is not present the this needs to be a string otherwise an array.
points.style.fill.startFromZero	boolean	Defines if the domain starts from 0 or not. Not Required. Default value: false Only applicable if points.style.fill.color is not given and points.style.fill.scaleType is linear.
points.mouseOver	Object	Defines the mouseOver effect on the points. Not Required. If not present no mouse over effect happens.
points.mouseOver.focusedObject	object	Defines the style for the mouseOver effect on the point. Required.
points.mouseOver.focusedObject.opacity	float	Defines the opacity of point when mouse hovers on it. Required.
points.mouseOver.focusedObject.fill	string	Defines the color of point when mouse hovers on it. Required.
points.mouseOver.nonFocusedObject	object	Defines the style for the point not in focus. Required.
points.mouseOver.nonFocusedObject.opacity	float	Defines the opacity of point which are not in focus when mouse hovers on a particular point. Required.
points.mouseOver.label	object	Defines the value and style of the mouse over text. Not Required. If not present the label is not shown.
points.mouseOver.label.value	function	Returns the value of the text that is to be shown in the label. Required. \n can be used for new line.
points.mouseOver.label.align	string	Defines the alignment of the text in the label. Required. Available values: center, left or right.
points.mouseOver.label.fontColor	string	Defines the color of the text in the label. Required.
points.mouseOver.label.lineHeight	float	Defines the line height of the text in the label. Not Required.
points.mouseOver.label.wrapCount	int	Defines the wrap count of the text in the label. Not Required.
points.mouseOver.label.backgroundColor	string	Defines the color of the background of the label. Required.
points.mouseOver.label.backgroundOpacity	string	Defines the color of the background of the label. Required.
points.mouseOver.label.position	string	Defines the position of the label w.r.t the cursor. Not Required. Format is "0 0 0".
points.mouseOver.label.rotation	string	Defines the rotation of the label w.r.t the cursor. Not Required. Format is "90 0 0".
points.mouseOver.label.width	float	Defines the width of the label. Not Required.
points.mouseOver.label.height	float	Defines the height of the label. Not Required.
points.onClick	function	Callback function for mouseclick on the shape. Argument of the function is the data binded to the shape. Not Required
line	object	Defines the style of the connecting line in connected scatter plot. Not Required.
line.style	object	Defines the style of the line. Not Required.
line.style.stroke.color	string	Defines the color for line. Not Required. Default value: "#000000
line.style.stroke.opacity	float	Defines the opacity for line. Not Required. Default value: 1 Value must be between 0 and 1.
line.style.stroke.curveType	string	Defines the type of curver for line. Available vaules: line for straight line, CatmullRomCurve for curve and lineSegment for discontinuos line segments. Not Required.Default Value: line
line.style.stroke.width	number	Defines the stroke width of line. Not Required. Default Value: 1
label	object	Defines the style of the connecting line in connected scatter plot. Not Required. If not present the labels are not shown close to the point.
label.field	string	Defines the field in the data that will be used as the text for the labels. Required.
label.style	object	Defines the style of the label. Not Required.
label.billboarding	bool	Defines if the text always face the camera. Not Required. Default value: true.
label.style.color	string	Defines the color for label. Not Required. Default value: "#000000"
label.style.opacity	float	Defines the opacity for label. Not Required. Default value: 1 Value must be between 0 and 1.
label.style.fontSize	float	Defines the size of label. Not Required. Default value: 1

Example JS of the Visualization

Data

Datafile: csv

In connected scatterplot the order of the dataset is considered as the order in which the connected scatterplot is plotted.

Year,Cars,Trucks,Bikes
1990,119,143,1
1991,104,30,2
1992,58,83,3
1993,134,88,4
1994,119,60,5