VEGA - Formatting of links between nodes

[DW19904]

Hi, I have created a tree visualization in VEGA within the deneb visual, and i am just looking for a little bit of VEGA help as i am currently on the learning curve of from Vega-Lite to Vega. I have attached image of visual.

Now basically what i am trying to achieve is to format the color or the dash of the links between nodes based on a field in my data, the field is called relationship. For example when the relationship field is X, i need the link between nodes to either be dashed or red.

The Vega code is below.

{ "width": 1100, "height": 600, "padding": 5, "signals": [ { "name": "labels", "value": true, "bind": {"input": "checkbox"} }, { "name": "layout", "value": "tidy", "bind": { "input": "radio", "options": ["tidy", "cluster"] } }, { "name": "links", "value": "diagonal", "bind": { "input": "select", "options": [ "line", "curve", "diagonal", "orthogonal" ] } }, { "name": "separation", "value": false, "bind": {"input": "checkbox"} } ], "data": [ { "name": "dataset", "transform": [ { "type": "stratify", "key": "id", "parentKey": "parent" }, { "type": "tree", "method": { "signal": "layout" }, "size": [ {"signal": "height"}, {"signal": "width - 100"} ], "separation": { "signal": "separation" }, "as": [ "y", "x", "depth", "children" ] } ] }, { "name": "links", "source": "dataset", "transform": [ {"type": "treelinks"}, { "type": "linkpath", "orient": "horizontal", "shape": {"signal": "links"} } ] } ], "scales": [ { "name": "color", "type": "linear", "range": { "scheme": "lightgreyteal" }, "domain": { "data": "dataset", "field": "depth" }, "zero": true } ], "marks": [ { "type": "path", "from": {"data": "links"}, "encode": { "update": { "path": {"field": "path"}, "stroke": {"value": "#ccc"} } } }, { "type": "symbol", "from": {"data": "dataset"}, "encode": { "enter": { "size": {"value": 1000}, "stroke": {"value": "#fff"} }, "update": { "x": {"field": "x"}, "y": {"field": "y"}, "fill": { "scale": "color", "field": "depth" }, "shape": { "signal": "datum.gender === 'Male' ? 'square' : 'circle'" } } } }, { "type": "text", "from": {"data": "dataset"}, "encode": { "enter": { "text": {"field": "name"}, "fontSize": {"value": 12}, "baseline": { "value": "middle" } }, "update": { "x": {"field": "x"}, "y": {"field": "y"}, "dx": { "signal": "datum.children ? -20 : 20" }, "align": { "signal": "datum.children ? 'right' : 'left'" }, "opacity": { "signal": "labels ? 1 : 0" } } } } ] }

Any help is very much appreciated.

[avatorl]

For example when the relationship field is X, i need the link between nodes to either be dashed or red.

This mark creates the links between the nodes:

{
"type": "path",
"from": {"data": "links"},
"encode": {
"update": {
"path": {"field": "path"},
"stroke": {"value": "#ccc"}
}
}
}

To change color of the line edit "stroke" property. Currently it's gray: {"value": "#ccc"} To make a dashed line add "strokeDash" property, for example: "strokeDash": {"value": [5,2]}

[5,2] means 5 pixels long line, 2 pixels of white space, then the same pattern will be repeated to make a dashed line.

See General Mark Properties at https://vega.github.io/vega/docs/marks/line/ for more details about available properties.

To use conditional formatting instead of a constant value, replace "value" with "signal" and then use an expression: https://vega.github.io/vega/docs/expressions/

For example:

"stroke": {"signal": "datum.source.name=='Mother' ? '#00f' : '#ccc'"} will make links that connects "Mother" with children nodes blue and all other links grey.

"strokeDash": {"signal": "datum.target.name=='Mother' ? [5,2] : null"} will make links that connects "Mother" parent node ("You") dashed.

[DW19904]

Thank you!

[CFAcodes]

I got a empty result when I copied the code in the Vega Editor. Did I miss something? Please advise.