Hey all,
I'm using the VEGA visualization in ELK version 7.13.3
I'm trying to draw nodes connected to networks.
I want the x, y coordinates represent the "node_id" and "net_level" respectively, using the force transform.
if I use "static:true" and not using the "x" and "y" forces, it looks great, but if I want to use the "static:false" and try to add the "x", "y" forces, I'm failing.
my guess is I'm using the forces incorrectly.
"forces": [
{"force": "x", "x": {"scale": "x-scale", "field": "datum.node_id"}
{"force": "y", "y": {"scale": "y-scale", "field": "datum.net_level"}
{"force": "nbody"},
{"force": "link", "links": "link-info"}
]
any ideas?
below is the full demo code, that can be used in the VEGA editor, for reference
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"background": "black",
"padding": {"top": 150, "left": 100, "bottom": 150, "right": 100},
"signals": [
{
"name": "active",
"on": [
{"events": "symbol:click", "update": "datum.node_id"},
{"events": "symbol:dblclick", "update": "{}"}
]
},
{"name": "colorIn", "value": "firebrick"},
{"name": "colorOut", "value": "white"}
],
"data": [
{
"name": "network_properties",
"values": [
{
"NetName": "NetType1",
"net_level": 1,
"color": "#FDFEFE",
"width": 2,
"dashes": [4, 4]
},
{
"NetName": "NetType2",
"net_level": 1,
"color": "#FDFEFE",
"width": 2,
"dashes": [4, 4]
}
]
},
{
"name": "node-data",
"values": [
{
"key": {"Net": "NetType1", "node_id": "1"},
"doc_count": 8,
"node_id": "1",
"Net": "NetType1",
"net_level": 1
},
{
"key": {"Net": "NetType2", "node_id": "1"},
"doc_count": 8,
"node_id": "1",
"Net": "NetType2",
"net_level": 1
},
{
"key": {"Net": "NetType1", "node_id": "2"},
"doc_count": 8,
"node_id": "2",
"Net": "NetType1",
"net_level": 1
},
{
"key": {"Net": "NetType2", "node_id": "3"},
"doc_count": 8,
"node_id": "3",
"Net": "NetType2",
"net_level": 1
}
],
"transform": [
{"type": "formula", "expr": "datum.key.node_id", "as": "node_id"},
{"type": "formula", "expr": "datum.key.Net", "as": "Net"},
{
"type": "aggregate",
"groupby": ["node_id"],
"fields": ["net_level"],
"ops": ["max"],
"as": ["net_level"]
},
{"type": "identifier", "as": "index"},
{"type": "formula", "expr": "datum.index-1", "as": "index"}
]
},
{
"name": "link-info",
"values": [
{"Net": "NetType1", "fromNode": "1", "toNode": "2"},
{"Net": "NetType1", "fromNode": "2", "toNode": "1"},
{"Net": "NetType2", "fromNode": "1", "toNode": "3"},
{"Net": "NetType2", "fromNode": "3", "toNode": "1"}
],
"transform": [
{
"type": "formula",
"expr": "datum.Net + ' ' + datum.fromNode + ' ' + datum.toNode",
"as": "lookUpKey"
},
{
"type": "lookup",
"from": "network_properties",
"key": "NetName",
"fields": ["Net"],
"as": ["net_properties"],
"default": 0
},
{
"type": "lookup",
"from": "node-data",
"key": "node_id",
"fields": ["toNode"],
"values": ["index"],
"as": ["target"],
"default": 0
},
{
"type": "lookup",
"from": "node-data",
"key": "node_id",
"fields": ["fromNode"],
"values": ["index"],
"as": ["source"],
"default": 0
},
{
"type": "formula",
"expr": "datum.net_properties.color",
"as": "color"
},
{
"type": "formula",
"expr": "datum.net_properties.width",
"as": "width"
},
{
"type": "formula",
"expr": "datum.net_properties.dashes",
"as": "dashes"
},
{
"type":"aggregate",
"groupby":["fromNode","toNode","color","width","dashes","source","target"]
}
]
},
{
"name": "selected",
"source": "link-info",
"transform": [
{
"type": "filter",
"expr": "datum.fromNode === active || datum.toNode === active"
}
]
}
],
"scales": [
{
"name": "x-scale",
"type": "linear",
"domain": {"data": "node-data", "field": "index"},
"range": "width"
},
{
"name": "y-scale",
"type": "linear",
"domain": {"data": "node-data", "field": "net_level"},
"range": [390, 0]
}
],
"marks": [
{
"name": "nodes",
"type": "symbol",
"zindex": 1,
"from": {"data": "node-data"},
"encode": {
"enter": {
"fill": {"value": "blue"},
"stroke": {"value": "white"},
"x": {"scale": "x-scale", "field": "index"},
"y": {"scale": "y-scale", "field": "net_level"}
},
"update": {
"size": [
{"test": "datum.node_id === active", "value": 500},
{
"test": "indata('selected', 'fromNode', datum.node_id)",
"value": 250
},
{"value": 100}
],
"fill": [
{"test": "datum.node_id === active", "signal": "colorIn"},
{
"test": "indata('selected', 'fromNode', datum.node_id)",
"signal": "colorOut"
},
{"value": "blue"}
],
"cursor": {"value": "pointer"}
},
"hover": {
"tooltip": {
"signal": "{'node_id':datum.node_id,'Hier':datum.net_level}"
},
"strokeWidth": [{"value": 1}]
}
},
"transform": [
{
"type": "force",
"iterations": 100,
"restart": false,
"static": false,
"signal": "force",
"forces": [
{"force": "x", "x":"datum.node_id"},
{"force": "y", "y":"datum.net_level"},
{"force": "nbody"},
{"force": "link", "links": "link-info"}
]
}
]
},
{
"type": "path",
"from": {"data": "link-info"},
"interactive": false,
"encode": {
"update": {
"stroke": [{"field": "color"}],
"strokeWidth": [
{
"test": "datum.fromNode === active || datum.toNode === active",
"value": 5
},
{"field": "width"}
],
"strokeDash": [{"field": "dashes"}]
},
"hover": {"strokeWidth": [{"value": 2}]}
},
"transform": [
{
"type": "linkpath",
"require": {"signal": "force"},
"shape": "curve",
"sourceX": "datum.source.x",
"sourceY": "datum.source.y",
"targetX": "datum.target.x",
"targetY": "datum.target.y"
}
]
}
]
}
