node-red-node-ui-vega/examples/Vega-Lite - Line and Bart Chart.json

Node-RED UI widget node for Vega visualization grammar

[{"id":"a73aba10.875658","type":"tab","label":"[Vega-Lite] Line & Bar Chart","disabled":false,"info":"# Line & Bar Chart Example\n\nShows overlapped line chart and bar chart.\nUses sequence of template nodes to create vega specification by merging template and data."},{"id":"6a3f374d.1226b8","type":"ui_vega","z":"a73aba10.875658","group":"e3364ae6.46a5f8","name":"Line & Bar Chart","order":5,"width":"10","height":"6","vega":"","x":780,"y":80,"wires":[]},{"id":"ac844791.02c128","type":"inject","z":"a73aba10.875658","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":140,"y":80,"wires":[["de413e63.81aa1"]]},{"id":"de413e63.81aa1","type":"template","z":"a73aba10.875658","name":"Vega-Lite Spec","field":"payload","fieldType":"msg","format":"json","syntax":"plain","template":"{\n    \"width\": \"360\",\n    \"height\": \"250\",\n    \"data\": {\n        \"values\": []\n    },\n    \"layer\": [\n        {\n            \"mark\": \"line\",\n            \"encoding\": {\n                \"x\": {\n                    \"field\": \"year\",\n                    \"type\": \"temporal\"\n                },\n                \"y\": {\n                    \"field\": \"population\",\n                    \"type\": \"quantitative\",\n                    \"scale\": {\n                        \"zero\": false\n                    }\n                }\n            }\n        },\n        {\n            \"mark\": \"bar\",\n            \"encoding\": {\n                \"x\": {\n                    \"field\": \"year\",\n                    \"type\": \"temporal\"\n                },\n                \"y\": {\n                    \"field\": \"GDP\",\n                    \"type\": \"quantitative\"\n                },\n                \"color\": {\n                    \"value\": \"#080\"\n                },\n                \"fillOpacity\": {\n                    \"value\": 0.5\n                }\n            }\n        }\n    ],\n    \"resolve\": {\n        \"scale\": {\n            \"y\": \"independent\"\n        }\n    }\n}","output":"json","x":320,"y":80,"wires":[["ca3eb97.47ccc48"]]},{"id":"ca3eb97.47ccc48","type":"template","z":"a73aba10.875658","name":"Data (Population & GDP)","field":"payload.data.values","fieldType":"msg","format":"json","syntax":"plain","template":"[\n    {\n        \"year\": \"1960\",\n        \"population\": 92500572,\n        \"GDP\": 44.30734295\n    },\n    {\n        \"year\": \"1961\",\n        \"population\": 94943000,\n        \"GDP\": 53.508617739\n    },\n    {\n        \"year\": \"1962\",\n        \"population\": 95832000,\n        \"GDP\": 60.723018684\n    },\n    {\n        \"year\": \"1963\",\n        \"population\": 96812000,\n        \"GDP\": 69.498131797\n    },\n    {\n        \"year\": \"1964\",\n        \"population\": 97826000,\n        \"GDP\": 81.749006382\n    },\n    {\n        \"year\": \"1965\",\n        \"population\": 98883000,\n        \"GDP\": 90.950278258\n    },\n    {\n        \"year\": \"1966\",\n        \"population\": 99790000,\n        \"GDP\": 105.628\n    },\n    {\n        \"year\": \"1967\",\n        \"population\": 100725000,\n        \"GDP\": 123.782\n    },\n    {\n        \"year\": \"1968\",\n        \"population\": 101061000,\n        \"GDP\": 146.601\n    },\n    {\n        \"year\": \"1969\",\n        \"population\": 103172000,\n        \"GDP\": 172.204\n    },\n    {\n        \"year\": \"1970\",\n        \"population\": 104345000,\n        \"GDP\": 212.609\n    },\n    {\n        \"year\": \"1971\",\n        \"population\": 105697000,\n        \"GDP\": 240.152\n    },\n    {\n        \"year\": \"1972\",\n        \"population\": 107188000,\n        \"GDP\": 318.031\n    },\n    {\n        \"year\": \"1973\",\n        \"population\": 108079000,\n        \"GDP\": 432.083\n    },\n    {\n        \"year\": \"1974\",\n        \"population\": 110162000,\n        \"GDP\": 479.626\n    },\n    {\n        \"year\": \"1975\",\n        \"population\": 111940000,\n        \"GDP\": 521.542\n    },\n    {\n        \"year\": \"1976\",\n        \"population\": 112771000,\n        \"GDP\": 586.162\n    },\n    {\n        \"year\": \"1977\",\n        \"population\": 113863000,\n        \"GDP\": 721.412\n    },\n    {\n        \"year\": \"1978\",\n        \"population\": 114898000,\n        \"GDP\": 1013.61\n    },\n    {\n        \"year\": \"1979\",\n        \"population\": 115870000,\n        \"GDP\": 1055.01\n    },\n    {\n        \"year\": \"1980\",\n        \"population\": 116782000,\n        \"GDP\": 1105.39\n    },\n    {\n        \"year\": \"1981\",\n        \"population\": 117648000,\n        \"GDP\": 1218.99\n    },\n    {\n        \"year\": \"1982\",\n        \"population\": 118449000,\n        \"GDP\": 1134.52\n    },\n    {\n        \"year\": \"1983\",\n        \"population\": 119259000,\n        \"GDP\": 1243.32\n    },\n    {\n        \"year\": \"1984\",\n        \"population\": 120018000,\n        \"GDP\": 1318.38\n    },\n    {\n        \"year\": \"1985\",\n        \"population\": 120754000,\n        \"GDP\": 1398.89\n    },\n    {\n        \"year\": \"1986\",\n        \"population\": 121492000,\n        \"GDP\": 2078.95\n    },\n    {\n        \"year\": \"1987\",\n        \"population\": 122091000,\n        \"GDP\": 2532.81\n    },\n    {\n        \"year\": \"1988\",\n        \"population\": 122613000,\n        \"GDP\": 3071.68\n    },\n    {\n        \"year\": \"1989\",\n        \"population\": 123116000,\n        \"GDP\": 3054.91\n    },\n    {\n        \"year\": \"1990\",\n        \"population\": 123537000,\n        \"GDP\": 3132.82\n    },\n    {\n        \"year\": \"1991\",\n        \"population\": 123921000,\n        \"GDP\": 3584.42\n    },\n    {\n        \"year\": \"1992\",\n        \"population\": 124229000,\n        \"GDP\": 3908.81\n    },\n    {\n        \"year\": \"1993\",\n        \"population\": 124536000,\n        \"GDP\": 4454.14\n    },\n    {\n        \"year\": \"1994\",\n        \"population\": 124961000,\n        \"GDP\": 4907.04\n    },\n    {\n        \"year\": \"1995\",\n        \"population\": 125439000,\n        \"GDP\": 5449.12\n    },\n    {\n        \"year\": \"1996\",\n        \"population\": 125757000,\n        \"GDP\": 4833.71\n    },\n    {\n        \"year\": \"1997\",\n        \"population\": 126057000,\n        \"GDP\": 4414.73\n    },\n    {\n        \"year\": \"1998\",\n        \"population\": 126400000,\n        \"GDP\": 4032.51\n    },\n    {\n        \"year\": \"1999\",\n        \"population\": 126631000,\n        \"GDP\": 4562.08\n    },\n    {\n        \"year\": \"2000\",\n        \"population\": 126843000,\n        \"GDP\": 4887.52\n    },\n    {\n        \"year\": \"2001\",\n        \"population\": 127149000,\n        \"GDP\": 4303.54\n    },\n    {\n        \"year\": \"2002\",\n        \"population\": 127445000,\n        \"GDP\": 4115.12\n    },\n    {\n        \"year\": \"2003\",\n        \"population\": 127718000,\n        \"GDP\": 4445.66\n    },\n    {\n        \"year\": \"2004\",\n        \"population\": 127761000,\n        \"GDP\": 4815.15\n    },\n    {\n        \"year\": \"2005\",\n        \"population\": 127773000,\n        \"GDP\": 4755.41\n    },\n    {\n        \"year\": \"2006\",\n        \"population\": 127854000,\n        \"GDP\": 4530.38\n    },\n    {\n        \"year\": \"2007\",\n        \"population\": 128001000,\n        \"GDP\": 4515.26\n    },\n    {\n        \"year\": \"2008\",\n        \"population\": 128063000,\n        \"GDP\": 5037.91\n    },\n    {\n        \"year\": \"2009\",\n        \"population\": 128047000,\n        \"GDP\": 5231.38\n    },\n    {\n        \"year\": \"2010\",\n        \"population\": 128070000,\n        \"GDP\": 5700.1\n    },\n    {\n        \"year\": \"2011\",\n        \"population\": 127833000,\n        \"GDP\": 6157.46\n    },\n    {\n        \"year\": \"2012\",\n        \"population\": 127629000,\n        \"GDP\": 6203.21\n    },\n    {\n        \"year\": \"2013\",\n        \"population\": 127445000,\n        \"GDP\": 5155.72\n    },\n    {\n        \"year\": \"2014\",\n        \"population\": 127276000,\n        \"GDP\": 4850.41\n    },\n    {\n        \"year\": \"2015\",\n        \"population\": 127141000,\n        \"GDP\": 4389.48\n    },\n    {\n        \"year\": \"2016\",\n        \"population\": 126994511,\n        \"GDP\": 4926.67\n    },\n    {\n        \"year\": \"2017\",\n        \"population\": 126785797,\n        \"GDP\": 4859.95\n    },\n    {\n        \"year\": \"2018\",\n        \"population\": 126529100,\n        \"GDP\": 4970.92\n    }\n]","output":"json","x":550,"y":80,"wires":[["6a3f374d.1226b8"]]},{"id":"da12f9.6f726d08","type":"comment","z":"a73aba10.875658","name":"↓ Display on Dashboard","info":"","x":800,"y":40,"wires":[]},{"id":"b73ec658.fe14f8","type":"comment","z":"a73aba10.875658","name":"↑ Add Data to Spec.","info":"","x":530,"y":120,"wires":[]},{"id":"57e707c0.af2a68","type":"comment","z":"a73aba10.875658","name":"↓ Visualization Spec.","info":"","x":330,"y":40,"wires":[]},{"id":"e3364ae6.46a5f8","type":"ui_group","z":"","name":"Group 1","tab":"fb70545f.eecaa8","order":1,"disp":false,"width":"10","collapse":false},{"id":"fb70545f.eecaa8","type":"ui_tab","z":"","name":"[Vega-Lite] Line & Bar Chart","icon":"dashboard","order":6,"disabled":false,"hidden":false}]