node-red-node-ui-vega/examples/Vega-Lite - Isotype Bar Chart.json

Node-RED UI widget node for Vega visualization grammar

[{"id":"a1c96309.1d3fe","type":"tab","label":"[Vega-Lite] Isotype Bar Chart wirh Emoji","disabled":false,"info":"# Isotype Bar Chart with Emoji Example\n\nShows bar chart with Emoji.\nIn this example, number of each items are converted to layout information using `function` node."},{"id":"9a6212fc.2abb2","type":"ui_vega","z":"a1c96309.1d3fe","group":"12590f72.a656d1","name":"Vega","order":7,"width":"10","height":"4","vega":"","x":790,"y":100,"wires":[]},{"id":"1e2cefe7.1acce","type":"inject","z":"a1c96309.1d3fe","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":100,"wires":[["154b54ca.d7998b"]]},{"id":"1d903afc.136d35","type":"template","z":"a1c96309.1d3fe","name":"Data","field":"data","fieldType":"msg","format":"json","syntax":"plain","template":"[\n    {\"emoji\": \"🐖\", \"count\": 12},\n    {\"emoji\": \"🐂\", \"count\": 6},\n    {\"emoji\": \"🐓\", \"count\": 12},\n    {\"emoji\": \"🐟\", \"count\": 27}\n]\n","output":"json","x":470,"y":100,"wires":[["74ee05e9.43c32c"]]},{"id":"74ee05e9.43c32c","type":"function","z":"a1c96309.1d3fe","name":"Conv Data","func":"let data = msg.payload.data;\nlet values = msg.data;\nlet result = [];\nvalues.forEach(function (data) {\n    let count = data.count;\n    // create data for each column\n    for(var i = 0; i < count; i++) {\n        result.push({\n            emoji: data.emoji,\n            col: i\n        })\n    }\n});\ndata.values = result;\nreturn msg;","outputs":1,"noerr":0,"x":630,"y":100,"wires":[["9a6212fc.2abb2"]]},{"id":"154b54ca.d7998b","type":"template","z":"a1c96309.1d3fe","name":"Vega-Lite Spec","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"{\n  \"config\": {\"view\": {\"stroke\": \"\"}},\n  \"width\": 400,\n  \"height\": 180,\n  \"data\": {\n    \"values\": []\n  },\n  \"mark\": {\n    \"type\": \"text\", \n    \"baseline\": \"middle\"\n  },\n  \"encoding\": {\n    \"x\": {\n      \"field\": \"col\", \n      \"type\": \"ordinal\", \n      \"axis\": null\n    },\n    \"y\": {\n      \"field\": \"emoji\", \n      \"type\": \"nominal\", \n      \"axis\": null, \n      \"sort\": null\n    },\n    \"text\": {\n      \"field\": \"emoji\", \n      \"type\": \"nominal\"\n    },\n    \"size\": {\n        \"value\": 32\n    }\n  }\n}\n","output":"json","x":300,"y":100,"wires":[["1d903afc.136d35"]]},{"id":"59627252.ace2ac","type":"comment","z":"a1c96309.1d3fe","name":"↓ Display on Dashboard","info":"","x":840,"y":60,"wires":[]},{"id":"87926512.cc2d78","type":"comment","z":"a1c96309.1d3fe","name":"↓ Convert Data for Visualization","info":"","x":690,"y":140,"wires":[]},{"id":"13db88a0.39cdd7","type":"comment","z":"a1c96309.1d3fe","name":"↓ Add Data","info":"","x":480,"y":60,"wires":[]},{"id":"cb263aa8.7f1cd8","type":"comment","z":"a1c96309.1d3fe","name":"↑ Visualization Spec.","info":"","x":310,"y":140,"wires":[]},{"id":"12590f72.a656d1","type":"ui_group","z":"","name":"Group 1","tab":"446a9c7b.03baf4","order":1,"disp":false,"width":"10","collapse":false},{"id":"446a9c7b.03baf4","type":"ui_tab","z":"","name":"[Vega-Lite] Isotype Bar Chart with Emoji","icon":"dashboard","order":3,"disabled":false,"hidden":false}]