node-red-node-ui-vega/examples/Vega - Radial Tree Layout.json

Node-RED UI widget node for Vega visualization grammar

[{"id":"459244a5.abbb6c","type":"tab","label":"[Vega] Radial Tree Layout","disabled":false,"info":"# Radial Tree Layout Example\n\nShows a tree data in radial tree layout.\n\nIn this example, the tree data used in vega specification is accessed by URL.\nSecond flow servies this request.\n"},{"id":"21e0e3e1.04f72c","type":"ui_vega","z":"459244a5.abbb6c","group":"84147604.b29078","name":"Vega","order":3,"width":"10","height":"9","vega":"{\n  \"width\": 480,\n  \"height\": 450,\n  \"padding\": 5,\n  \"autosize\": \"none\",\n  \"signals\": [\n    {\n      \"name\": \"originX\",\n      \"update\": \"width / 2\"\n    },\n    {\n      \"name\": \"originY\",\n      \"update\": \"height / 2\"\n    }\n  ],\n  \"data\": [\n    {\n      \"name\": \"tree\",\n      \"url\": \"/tree-data\",\n      \"transform\": [\n        {\n          \"type\": \"stratify\",\n          \"key\": \"id\",\n          \"parentKey\": \"parent\"\n        },\n        {\n          \"type\": \"tree\",\n          \"method\": \"tidy\",\n          \"size\": [\n            1,\n            230\n          ],\n          \"as\": [\n            \"alpha\",\n            \"radius\",\n            \"depth\",\n            \"children\"\n          ]\n        },\n        {\n          \"type\": \"formula\",\n          \"expr\": \"(360 * datum.alpha + 270) % 360\",\n          \"as\": \"angle\"\n        },\n        {\n          \"type\": \"formula\",\n          \"expr\": \"PI * datum.angle / 180\",\n          \"as\": \"radians\"\n        },\n        {\n          \"type\": \"formula\",\n          \"expr\": \"inrange(datum.angle, [90, 270])\",\n          \"as\": \"leftside\"\n        },\n        {\n          \"type\": \"formula\",\n          \"expr\": \"originX + datum.radius * cos(datum.radians)\",\n          \"as\": \"x\"\n        },\n        {\n          \"type\": \"formula\",\n          \"expr\": \"originY + datum.radius * sin(datum.radians)\",\n          \"as\": \"y\"\n        }\n      ]\n    },\n    {\n      \"name\": \"links\",\n      \"source\": \"tree\",\n      \"transform\": [\n        {\n          \"type\": \"treelinks\"\n        },\n        {\n          \"type\": \"linkpath\",\n          \"shape\": \"line\",\n          \"orient\": \"radial\",\n          \"sourceX\": \"source.radians\",\n          \"sourceY\": \"source.radius\",\n          \"targetX\": \"target.radians\",\n          \"targetY\": \"target.radius\"\n        }\n      ]\n    }\n  ],\n  \"scales\": [\n    {\n      \"name\": \"color\",\n      \"type\": \"linear\",\n      \"range\": {\n        \"scheme\": \"magma\"\n      },\n      \"domain\": {\n        \"data\": \"tree\",\n        \"field\": \"depth\"\n      },\n      \"zero\": true\n    }\n  ],\n  \"marks\": [\n    {\n      \"type\": \"path\",\n      \"from\": {\n        \"data\": \"links\"\n      },\n      \"encode\": {\n        \"update\": {\n          \"x\": {\n            \"signal\": \"originX\"\n          },\n          \"y\": {\n            \"signal\": \"originY\"\n          },\n          \"path\": {\n            \"field\": \"path\"\n          },\n          \"stroke\": {\n            \"value\": \"#ccc\"\n          }\n        }\n      }\n    },\n    {\n      \"type\": \"symbol\",\n      \"from\": {\n        \"data\": \"tree\"\n      },\n      \"encode\": {\n        \"enter\": {\n          \"size\": {\n            \"value\": 100\n          },\n          \"stroke\": {\n            \"value\": \"#fff\"\n          }\n        },\n        \"update\": {\n          \"x\": {\n            \"field\": \"x\"\n          },\n          \"y\": {\n            \"field\": \"y\"\n          },\n          \"fill\": {\n            \"scale\": \"color\",\n            \"field\": \"depth\"\n          }\n        }\n      }\n    },\n    {\n      \"type\": \"text\",\n      \"from\": {\n        \"data\": \"tree\"\n      },\n      \"encode\": {\n        \"enter\": {\n          \"text\": {\n            \"field\": \"name\"\n          },\n          \"fontSize\": {\n            \"value\": 12\n          },\n          \"baseline\": {\n            \"value\": \"middle\"\n          }\n        },\n        \"update\": {\n          \"x\": {\n            \"field\": \"x\"\n          },\n          \"y\": {\n            \"field\": \"y\"\n          },\n          \"dx\": {\n            \"signal\": \"(datum.leftside ? -1 : 1) * 6\"\n          },\n          \"angle\": {\n            \"signal\": \"datum.leftside ? datum.angle - 180 : datum.angle\"\n          },\n          \"align\": {\n            \"signal\": \"datum.leftside ? 'right' : 'left'\"\n          },\n          \"opacity\": 1\n        }\n      }\n    }\n  ]\n}\n","x":170,"y":100,"wires":[]},{"id":"cea3fa34.2ba198","type":"template","z":"459244a5.abbb6c","name":"Tree Data","field":"payload","fieldType":"msg","format":"handlebars","syntax":"plain","template":"[\n    {\n        \"id\": 0,\n        \"name\": \"@node-red\"\n    },\n    {\n        \"id\": 1,\n        \"name\": \"util\",\n        \"parent\": 0\n    },\n    {\n        \"id\": 2,\n        \"name\": \"lib\",\n        \"parent\": 1\n    },\n    {\n        \"id\": 3,\n        \"name\": \"nodes\",\n        \"parent\": 0\n    },\n    {\n        \"id\": 4,\n        \"name\": \"locales\",\n        \"parent\": 3\n    },\n    {\n        \"id\": 5,\n        \"name\": \"ja\",\n        \"parent\": 4\n    },\n    {\n        \"id\": 6,\n        \"name\": \"zh-CN\",\n        \"parent\": 4\n    },\n    {\n        \"id\": 7,\n        \"name\": \"de\",\n        \"parent\": 4\n    },\n    {\n        \"id\": 8,\n        \"name\": \"ko\",\n        \"parent\": 4\n    },\n    {\n        \"id\": 9,\n        \"name\": \"en-US\",\n        \"parent\": 4\n    },\n    {\n        \"id\": 10,\n        \"name\": \"core\",\n        \"parent\": 3\n    },\n    {\n        \"id\": 11,\n        \"name\": \"parsers\",\n        \"parent\": 10\n    },\n    {\n        \"id\": 12,\n        \"name\": \"hardware\",\n        \"parent\": 10\n    },\n    {\n        \"id\": 13,\n        \"name\": \"core\",\n        \"parent\": 10\n    },\n    {\n        \"id\": 14,\n        \"name\": \"lib\",\n        \"parent\": 13\n    },\n    {\n        \"id\": 15,\n        \"name\": \"debug\",\n        \"parent\": 14\n    },\n    {\n        \"id\": 16,\n        \"name\": \"io\",\n        \"parent\": 10\n    },\n    {\n        \"id\": 17,\n        \"name\": \"lib\",\n        \"parent\": 16\n    },\n    {\n        \"id\": 18,\n        \"name\": \"logic\",\n        \"parent\": 10\n    },\n    {\n        \"id\": 19,\n        \"name\": \"storage\",\n        \"parent\": 10\n    },\n    {\n        \"id\": 20,\n        \"name\": \"icons\",\n        \"parent\": 3\n    },\n    {\n        \"id\": 21,\n        \"name\": \"editor-api\",\n        \"parent\": 0\n    },\n    {\n        \"id\": 22,\n        \"name\": \"lib\",\n        \"parent\": 21\n    },\n    {\n        \"id\": 23,\n        \"name\": \"auth\",\n        \"parent\": 22\n    },\n    {\n        \"id\": 24,\n        \"name\": \"admin\",\n        \"parent\": 22\n    },\n    {\n        \"id\": 25,\n        \"name\": \"editor\",\n        \"parent\": 22\n    },\n    {\n        \"id\": 26,\n        \"name\": \"runtime\",\n        \"parent\": 0\n    },\n    {\n        \"id\": 27,\n        \"name\": \"locales\",\n        \"parent\": 26\n    },\n    {\n        \"id\": 28,\n        \"name\": \"ja\",\n        \"parent\": 27\n    },\n    {\n        \"id\": 29,\n        \"name\": \"de\",\n        \"parent\": 27\n    },\n    {\n        \"id\": 30,\n        \"name\": \"ko\",\n        \"parent\": 27\n    },\n    {\n        \"id\": 31,\n        \"name\": \"en-US\",\n        \"parent\": 27\n    },\n    {\n        \"id\": 32,\n        \"name\": \"lib\",\n        \"parent\": 26\n    },\n    {\n        \"id\": 33,\n        \"name\": \"nodes\",\n        \"parent\": 32\n    },\n    {\n        \"id\": 34,\n        \"name\": \"context\",\n        \"parent\": 33\n    },\n    {\n        \"id\": 35,\n        \"name\": \"flows\",\n        \"parent\": 33\n    },\n    {\n        \"id\": 36,\n        \"name\": \"library\",\n        \"parent\": 32\n    },\n    {\n        \"id\": 37,\n        \"name\": \"storage\",\n        \"parent\": 32\n    },\n    {\n        \"id\": 38,\n        \"name\": \"localfilesystem\",\n        \"parent\": 37\n    },\n    {\n        \"id\": 39,\n        \"name\": \"projects\",\n        \"parent\": 38\n    },\n    {\n        \"id\": 40,\n        \"name\": \"ssh\",\n        \"parent\": 39\n    },\n    {\n        \"id\": 41,\n        \"name\": \"git\",\n        \"parent\": 39\n    },\n    {\n        \"id\": 42,\n        \"name\": \"api\",\n        \"parent\": 32\n    },\n    {\n        \"id\": 43,\n        \"name\": \"registry\",\n        \"parent\": 0\n    },\n    {\n        \"id\": 44,\n        \"name\": \"lib\",\n        \"parent\": 43\n    },\n    {\n        \"id\": 45,\n        \"name\": \"editor-client\",\n        \"parent\": 0\n    },\n    {\n        \"id\": 46,\n        \"name\": \"locales\",\n        \"parent\": 45\n    },\n    {\n        \"id\": 47,\n        \"name\": \"ja\",\n        \"parent\": 46\n    },\n    {\n        \"id\": 48,\n        \"name\": \"zh-CN\",\n        \"parent\": 46\n    },\n    {\n        \"id\": 49,\n        \"name\": \"de\",\n        \"parent\": 46\n    },\n    {\n        \"id\": 50,\n        \"name\": \"ko\",\n        \"parent\": 46\n    },\n    {\n        \"id\": 51,\n        \"name\": \"en-US\",\n        \"parent\": 46\n    },\n    {\n        \"id\": 52,\n        \"name\": \"templates\",\n        \"parent\": 45\n    },\n    {\n        \"id\": 53,\n        \"name\": \"src\",\n        \"parent\": 45\n    },\n    {\n        \"id\": 54,\n        \"name\": \"images\",\n        \"parent\": 53\n    },\n    {\n        \"id\": 55,\n        \"name\": \"typedInput\",\n        \"parent\": 54\n    },\n    {\n        \"id\": 56,\n        \"name\": \"icons\",\n        \"parent\": 54\n    },\n    {\n        \"id\": 57,\n        \"name\": \"js\",\n        \"parent\": 53\n    },\n    {\n        \"id\": 58,\n        \"name\": \"ui\",\n        \"parent\": 57\n    },\n    {\n        \"id\": 59,\n        \"name\": \"touch\",\n        \"parent\": 58\n    },\n    {\n        \"id\": 60,\n        \"name\": \"projects\",\n        \"parent\": 58\n    },\n    {\n        \"id\": 61,\n        \"name\": \"editors\",\n        \"parent\": 58\n    },\n    {\n        \"id\": 62,\n        \"name\": \"common\",\n        \"parent\": 58\n    },\n    {\n        \"id\": 63,\n        \"name\": \"text\",\n        \"parent\": 57\n    },\n    {\n        \"id\": 64,\n        \"name\": \"sass\",\n        \"parent\": 53\n    },\n    {\n        \"id\": 65,\n        \"name\": \"ui\",\n        \"parent\": 64\n    },\n    {\n        \"id\": 66,\n        \"name\": \"common\",\n        \"parent\": 65\n    },\n    {\n        \"id\": 67,\n        \"name\": \"ace\",\n        \"parent\": 53\n    },\n    {\n        \"id\": 68,\n        \"name\": \"mode\",\n        \"parent\": 67\n    },\n    {\n        \"id\": 69,\n        \"name\": \"bin\",\n        \"parent\": 67\n    },\n    {\n        \"id\": 70,\n        \"name\": \"snippets\",\n        \"parent\": 69\n    },\n    {\n        \"id\": 71,\n        \"name\": \"vendor\",\n        \"parent\": 53\n    },\n    {\n        \"id\": 72,\n        \"name\": \"bootstrap\",\n        \"parent\": 71\n    },\n    {\n        \"id\": 73,\n        \"name\": \"css\",\n        \"parent\": 72\n    },\n    {\n        \"id\": 74,\n        \"name\": \"js\",\n        \"parent\": 72\n    },\n    {\n        \"id\": 75,\n        \"name\": \"img\",\n        \"parent\": 72\n    },\n    {\n        \"id\": 76,\n        \"name\": \"marked\",\n        \"parent\": 71\n    },\n    {\n        \"id\": 77,\n        \"name\": \"jsonata\",\n        \"parent\": 71\n    },\n    {\n        \"id\": 78,\n        \"name\": \"jquery\",\n        \"parent\": 71\n    },\n    {\n        \"id\": 79,\n        \"name\": \"css\",\n        \"parent\": 78\n    },\n    {\n        \"id\": 80,\n        \"name\": \"smoothness\",\n        \"parent\": 79\n    },\n    {\n        \"id\": 81,\n        \"name\": \"images\",\n        \"parent\": 80\n    },\n    {\n        \"id\": 82,\n        \"name\": \"js\",\n        \"parent\": 78\n    },\n    {\n        \"id\": 83,\n        \"name\": \"i18next\",\n        \"parent\": 71\n    },\n    {\n        \"id\": 84,\n        \"name\": \"d3\",\n        \"parent\": 71\n    },\n    {\n        \"id\": 85,\n        \"name\": \"ace\",\n        \"parent\": 71\n    },\n    {\n        \"id\": 86,\n        \"name\": \"snippets\",\n        \"parent\": 85\n    },\n    {\n        \"id\": 87,\n        \"name\": \"font-awesome\",\n        \"parent\": 71\n    },\n    {\n        \"id\": 88,\n        \"name\": \"css\",\n        \"parent\": 87\n    },\n    {\n        \"id\": 89,\n        \"name\": \"fonts\",\n        \"parent\": 87\n    }\n]\n","output":"json","x":380,"y":200,"wires":[["e1ab4237.3d54c"]]},{"id":"5ce63905.31c738","type":"http in","z":"459244a5.abbb6c","name":"","url":"/tree-data","method":"get","upload":false,"swaggerDoc":"","x":200,"y":200,"wires":[["cea3fa34.2ba198"]]},{"id":"e1ab4237.3d54c","type":"http response","z":"459244a5.abbb6c","name":"","statusCode":"","headers":{},"x":530,"y":200,"wires":[]},{"id":"e8086d9c.1ec5a","type":"comment","z":"459244a5.abbb6c","name":"↓ Display on Dashboard","info":"","x":220,"y":60,"wires":[]},{"id":"f7890dd7.a12d1","type":"comment","z":"459244a5.abbb6c","name":"↓ Provide URL access of data used in Vega spec.","info":"","x":300,"y":160,"wires":[]},{"id":"84147604.b29078","type":"ui_group","z":"","name":"Group 1","tab":"56d91d75.d0ebf4","order":1,"disp":false,"width":"10","collapse":false},{"id":"56d91d75.d0ebf4","type":"ui_tab","z":"","name":"[Vega] Tree Layout","icon":"dashboard","order":2,"disabled":false,"hidden":false}]