'mark': {
'nodes': {
'type': 'sphere',
'style': {
'radius': {
'value': 0.1,
},
'fill': {
'scaleType': 'ordinal',
'opacity': 1,
'field': 'group',
'color': ['green', 'blue', 'red', 'yellow', 'tomato', 'olive', 'magenta', 'cyan', 'gray', 'maroon'],
'domain': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
},
},
},
'links': {
'type': 'line',
'style': {
'fill': {
'scaleType': 'ordinal',
'opacity': {
'value': 0.3,
},
'field': 'value',
'color': ['green', 'blue', 'red', 'yellow', 'tomato', 'olive', 'magenta', 'cyan', 'gray', 'maroon'],
'domain': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
},
},
},
'labels': {
'field': 'id',
'style': {
'color': 'black',
'opacity': 1,
'fontSize': 1,
'padding': 0.1,
}
},
}
Properties for mark for Connected Scatter Plot
| Property | Type | Description |
|---|---|---|
| nodes | object | Defines the style and shape of the noda. Required. |
| nodes.type | string | Defines type of nodes that would be created. Not Required. Default value: sphere. Available values: sphere, box. |
| nodes.style | object | Defines the style of the node. Not Required. |
| nodes.style.fill | object | Defines the fill of the node. Not Required. |
| nodes.style.fill.opacity | float | Defines the opacity of the node. Not Required. Default value: 1 Value must be between 0 and 1. |
| nodes.style.fill.scaleType | string | Defines the scale type for fill of the node. Not Required. If not present then a constant color that is defined is filled in the node. Available values: linear or ordinal. |
| nodes.style.fill.field | string | Defines the field in the data that will be mapped as fill of the node. Required if nodes.style.fill.scaleType is present. |
| nodes.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 nodes.style.fill.scaleType |
| nodes.style.fill.color | array or string | Defines the color for fill. Not Required if style.fill.scaleType is present, else required. Default value: #ff0000 if nodes.style.fill.scaleType is not present else d3.schemeCategory10. If nodes.style.fill.scaleType is not present the this needs to be a string otherwise an array. |
| nodes.style.fill.startFromZero | boolean | Defines if the domain starts from 0 or not. Not Required. Default value: false Only applicable if nodes.style.fill.color is not given and nodes.style.fill.scaleType is linear. |
| nodes.style.radius | object | Defines the radius of the points. Not Required5 |
| nodes.style.radius.scaleType | string | Defines the scale type for radius of the points. Not Required. If not present then a constant radius that is defined is used. Available values: linear or ordinal. |
| nodes.style.radius.field | string | Defines the field in the data that will be mapped as radius of the points. Required if nodes.style.radius.scaleType is present. |
| nodes.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 nodes.style.radius.scaleType |
| nodes.style.radius.value | array of float or float | Defines the range for radius. Not Required. Default value: 0. If nodes.style.radius.scaleType is not present the nodes.style.radius.value is float or else its an array of float. |
| nodes.style.radius.startFromZero | boolean | Defines if the domain starts from 0 or not. Not Required. Default value: false Only applicable if nodes.style.radius.domain is not given and nodes.style.radius.scaleType is linear. |
| nodes.mouseOver | Object | Defines the mouseOver effect on the bars. Not Required. If not present no mouse over effect happens. |
| nodes.mouseOver.focusedObject | object | Defines the style for the mouseOver effect on the bar. Required. |
| nodes.mouseOver.focusedObject.opacity | float | Defines the opacity of bar when mouse hovers on it. Required. |
| nodes.mouseOver.focusedObject.fill | string | Defines the color of bar when mouse hovers on it. Required. |
| nodes.mouseOver.nonFocusedObject | object | Defines the style for the bar not in focus. Required. |
| nodes.mouseOver.nonFocusedObject.opacity | float | Defines the opacity of bar which are not in focus when mouse hovers on a particular bar. Required. |
| nodes.mouseOver.label | object | Defines the value and style of the mouse over text. Not Required. If not present the label is not shown. |
| nodes.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. |
| nodes.mouseOver.label.align | string | Defines the alignment of the text in the label. Required. Available values: center, left or right. |
| nodes.mouseOver.label.fontColor | string | Defines the color of the text in the label. Required. |
| nodes.mouseOver.label.lineHeight | float | Defines the line height of the text in the label. Not Required. |
| nodes.mouseOver.label.wrapCount | int | Defines the wrap count of the text in the label. Not Required. |
| nodes.mouseOver.label.backgroundColor | string | Defines the color of the background of the label. Required. |
| nodes.mouseOver.label.backgroundOpacity | string | Defines the color of the background of the label. Required. |
| nodes.mouseOver.label.position | string | Defines the position of the label w.r.t the cursor. Not Required. Format is "0 0 0". |
| nodes.mouseOver.label.rotation | string | Defines the rotation of the label w.r.t the cursor. Not Required. Format is "90 0 0". |
| nodes.mouseOver.label.width | float | Defines the width of the label. Not Required. |
| nodes.mouseOver.label.height | float | Defines the height of the label. Not Required. |
| nodes.onClick | function | Callback function for mouseclick on the shape. Argument of the function is the data binded to the shape. Not Required |
| links | object | Defines the style and shape of the link. Required. |
| links.type | string | Defines type of nodes that would be created. Not Required. Default value: line. Available values: line. |
| links.style | object | Defines the style of the link. Not Required. |
| links.style.fill | object | Defines the fill of the link. Not Required. |
| links.style.fill.scaleType | string | Defines the scale type for fill of the link. Not Required. If not present then a constant color that is defined is filled in the link. Available values: linear or ordinal. |
| links.style.fill.field | string | Defines the field in the data that will be mapped as fill of the link. Required if links.style.fill.scaleType is present. |
| links.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 links.style.fill.scaleType |
| links.style.fill.color | array of string or string | Defines the color for fill. Not Required if style.fill.scaleType is present, else required. Default value: #000000 if links.style.fill.scaleType is not present else d3.schemeCategory10. If links.style.fill.scaleType is not present the this needs to be a string otherwise an array. |
| links.style.fill.startFromZero | boolean | Defines if the domain starts from 0 or not. Not Required. Default value: false Only applicable if links.style.fill.color is not given and links.style.fill.scaleType is linear. |
| links.style.fill.opacity | object | Defines the opacity of the link. Not Required. Default value: 1 |
| links.style.fill.opacity.scaleType | string | Defines the scale type for opacity of the link. Not Required. If not present then a constant color that is defined is filled in the link. Available values: linear or ordinal. |
| links.style.fill.opacity.value | array of number or number | Defines the value of the duration of animation. Not Required. Default value: 1 If links.style.fill.opacity.scaleType is not present the this needs to be a number otherwise an array. |
| links.style.fill.opacity.field | string | Defines the field in the data that will be mapped as opacity of the link. Required if links.style.fill.opacity.scaleType is present. |
| links.style.fill.opacity.domain | array | Defines the domain for opacity. Not Required. If not present the domain is calculated from the provided data depending on the links.style.fill.opacity.scaleType |
| links.style.fill.opacity.startFromZero | boolean | Defines if the domain starts from 0 or not. Not Required. Default value: false Only applicable if links.style.fill.opacity.color is not given and links.style.fill.opacity.scaleType is linear. |
| links.flowAnimation | object | Defines the flow animation on the link. Not Required. |
| links.flowAnimation.opacity | number | Defines the opacity of the dot in the flow animation. Required. .Values must be between 0 and 1. |
| links.flowAnimation.color | string | Defines the color of the dot in the flow animation. Required. |
| links.flowAnimation.duration | object | Defines the speed of animation of the dot. Required. |
| links.flowAnimation.duration.scaleType | string | Defines the scale type for duration. Not Required. If not present then a constant duration that is defined is used. Available values: linear. |
| links.flowAnimation.duration.value | array of number or number | Defines the value of the duration of animation. Required If links.flowAnimation.duration.scaleType is not present the this needs to be a number otherwise an array. |
| links.flowAnimation.duration.field | string | Defines the field in the data that will be mapped as opacity of the link. Required if links.flowAnimation.duration.scaleType is present. |
| links.flowAnimation.duration.domain | array | Defines the domain for opacity. Not Required. If not present the domain is calculated from the provided data depending on the links.flowAnimation.duration.scaleType |
| links.flowAnimation.duration.startFromZero | boolean | Defines if the domain starts from 0 or not. Not Required. Default value: false |
| links.flowAnimation.radius | object | Defines the radius of the animating dot. Required. |
| links.flowAnimation.radius.scaleType | string | Defines the scale type for radius. Not Required. If not present then a constant radius that is defined is used. Available values: linear. |
| links.flowAnimation.radius.value | array of number or number | Defines the value of the radius. Required If links.flowAnimation.radius.scaleType is not present the this needs to be a number otherwise an array. |
| links.flowAnimation.radius.field | string | Defines the field in the data that will be mapped as opacity of the link. Required if links.flowAnimation.radius.scaleType is present. |
| links.flowAnimation.radius.domain | array | Defines the domain for opacity. Not Required. If not present the domain is calculated from the provided data depending on the links.flowAnimation.radius.scaleType |
| links.flowAnimation.radius.startFromZero | boolean | Defines if the domain starts from 0 or not. Not Required. Default value: false |
| links.onClick | function | Callback function for mouseclick on the shape. Argument of the function is the data binded to the shape. Not Required |
| labels | object | Defines the style of the label. Not Required. If not present the labels are not shown close to the nodes. |
| label.field | string | Defines the field in the data that will be used as the text for the labels. Required. |
| tabel.billboarding | bool | Defines if the text always face the camera. Not Required. Default value: true. |
| label.style | object | Defines the style of the label. Not Required. |
| 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. |
| label.style.padding | float | Defines the distance between the label and node. Not Required. Default vaoue: 0.1 |
Datafile: json
{
"nodes": [
{
"id": "Myriel",
"group": 1
},
{
"id": "Napoleon",
"group": 1
},
]
"links": [
{
"fromId": "Napoleon",
"toId": "Myriel",
"value": 1
},
{
"fromId": "Mlle_Baptistine",
"toId": "Myriel",
"value": 8
},
]