[{"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}]