[ANNOUNCE] node-red-node-ui-vega

Hi,

I have released new Node-RED Dashboard widget node for declarative data visualization using Vega visualization grammar.
(thank you Dave for support!)

Vega is a visualization grammar and framework for visualizing data developed by University of Washington Interactive Data Lab. New ui_vega node accepts Vega and Vega-Lite data visualization specification in JSON format.

Have fun!

13 Likes

I have been waiting for this kind of visualization for so long, Thx.
Is there any example of feeding SQL data to a line chart for example?

Hi. Thank you for your interest in Vega node.
Following is a modified version of line chart example.
This flow uses node-red-node-sqlite as in-memory SQL DB.

[{"id":"4a3ebea5.226f8","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":"678cb480.f906bc","type":"sqlitedb","z":"","db":":memory:","mode":"RWC"},{"id":"52a8715c.1cfe4","type":"ui_group","z":"","name":"Group 1","tab":"fb9c21c6.1a28a","order":1,"disp":false,"width":"10","collapse":false},{"id":"fb9c21c6.1a28a","type":"ui_tab","z":"","name":"[Vega-Lite] Line & Bar Chart","icon":"dashboard","order":6,"disabled":false,"hidden":false},{"id":"73d3f5d.0b3980c","type":"ui_vega","z":"4a3ebea5.226f8","group":"52a8715c.1cfe4","name":"Line & Bar Chart","order":5,"width":"10","height":"6","vega":"","x":880,"y":240,"wires":[]},{"id":"f0df88eb.1ad3f8","type":"template","z":"4a3ebea5.226f8","name":"Vega-Lite Spec","field":"vega","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":480,"y":240,"wires":[["182b6633.fcc02a"]]},{"id":"e3d24ce6.d5fe9","type":"comment","z":"4a3ebea5.226f8","name":"↓ Display on Dashboard","info":"","x":900,"y":200,"wires":[]},{"id":"7bd7f09.746ee1","type":"comment","z":"4a3ebea5.226f8","name":"↑ Add Data to Spec.","info":"","x":690,"y":280,"wires":[]},{"id":"cb5ca65e.9c7258","type":"comment","z":"4a3ebea5.226f8","name":"↓ Visualization Spec.","info":"","x":490,"y":200,"wires":[]},{"id":"a3d35227.c4932","type":"sqlite","z":"4a3ebea5.226f8","mydb":"678cb480.f906bc","sqlquery":"fixed","sql":"create table jpstat(year, population, GDP);\n","name":"Create","x":290,"y":120,"wires":[["72a612be.7fb6bc"]]},{"id":"4b1ff6d8.973648","type":"inject","z":"4a3ebea5.226f8","name":"Initialize","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":120,"wires":[["a3d35227.c4932"]]},{"id":"8b29e646.1b4b18","type":"sqlite","z":"4a3ebea5.226f8","mydb":"678cb480.f906bc","sqlquery":"fixed","sql":"select year, population, gdp from jpstat;\n","name":"","x":300,"y":240,"wires":[["f0df88eb.1ad3f8"]]},{"id":"1d3a0475.d2001c","type":"inject","z":"4a3ebea5.226f8","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":140,"y":240,"wires":[["8b29e646.1b4b18"]]},{"id":"7f8601d3.abcbd","type":"debug","z":"4a3ebea5.226f8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":870,"y":300,"wires":[]},{"id":"72a612be.7fb6bc","type":"sqlite","z":"4a3ebea5.226f8","mydb":"678cb480.f906bc","sqlquery":"fixed","sql":"insert into jpstat \nvalues \n    (1960, 92500572, 44.30734295),\n    (1961, 94943000, 53.508617739),\n    (1962, 95832000, 60.723018684),\n    (1963, 96812000, 69.498131797),\n    (1964, 97826000, 81.749006382),\n    (1965, 98883000, 90.950278258),\n    (1966, 99790000, 105.628),\n    (1967, 100725000, 123.782),\n    (1968, 101061000, 146.601),\n    (1969, 103172000, 172.204),\n    (1970, 104345000, 212.609),\n    (1971, 105697000, 240.152),\n    (1972, 107188000, 318.031),\n    (1973, 108079000, 432.083),\n    (1974, 110162000, 479.626),\n    (1975, 111940000, 521.542),\n    (1976, 112771000, 586.162),\n    (1977, 113863000, 721.412),\n    (1978, 114898000, 1013.61),\n    (1979, 115870000, 1055.01),\n    (1980, 116782000, 1105.39),\n    (1981, 117648000, 1218.99),\n    (1982, 118449000, 1134.52),\n    (1983, 119259000, 1243.32),\n    (1984, 120018000, 1318.38),\n    (1985, 120754000, 1398.89),\n    (1986, 121492000, 2078.95),\n    (1987, 122091000, 2532.81),\n    (1988, 122613000, 3071.68),\n    (1989, 123116000, 3054.91),\n    (1990, 123537000, 3132.82),\n    (1991, 123921000, 3584.42),\n    (1992, 124229000, 3908.81),\n    (1993, 124536000, 4454.14),\n    (1994, 124961000, 4907.04),\n    (1995, 125439000, 5449.12),\n    (1996, 125757000, 4833.71),\n    (1997, 126057000, 4414.73),\n    (1998, 126400000, 4032.51),\n    (1999, 126631000, 4562.08),\n    (2000, 126843000, 4887.52),\n    (2001, 127149000, 4303.54),\n    (2002, 127445000, 4115.12),\n    (2003, 127718000, 4445.66),\n    (2004, 127761000, 4815.15),\n    (2005, 127773000, 4755.41),\n    (2006, 127854000, 4530.38),\n    (2007, 128001000, 4515.26),\n    (2008, 128063000, 5037.91),\n    (2009, 128047000, 5231.38),\n    (2010, 128070000, 5700.1),\n    (2011, 127833000, 6157.46),\n    (2012, 127629000, 6203.21),\n    (2013, 127445000, 5155.72),\n    (2014, 127276000, 4850.41),\n    (2015, 127141000, 4389.48),\n    (2016, 126994511, 4926.67),\n    (2017, 126785797, 4859.95),\n    (2018, 126529100, 4970.92);\n","name":"Init","x":430,"y":120,"wires":[["679e9ed6.78c0f"]]},{"id":"679e9ed6.78c0f","type":"debug","z":"4a3ebea5.226f8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":590,"y":120,"wires":[]},{"id":"182b6633.fcc02a","type":"change","z":"4a3ebea5.226f8","name":"Create Spec","rules":[{"t":"set","p":"vega.data.values","pt":"msg","to":"payload","tot":"msg"},{"t":"set","p":"payload","pt":"msg","to":"vega","tot":"msg"},{"t":"delete","p":"vega","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":670,"y":240,"wires":[["7f8601d3.abcbd","73d3f5d.0b3980c"]]},{"id":"1778d9ee.5fa8c6","type":"comment","z":"4a3ebea5.226f8","name":"↓ Read DB","info":"","x":300,"y":200,"wires":[]}]

Since Vega node cannot directly access DB, DB reference results and Vega grammar are synthesized using change node.

1 Like

Thx, it is working now. I can feed mySQL data into your graph.
I just need to add multiple lines with different colors and label, how to do that? Thx

{
"width": "360",
"height": "250",
"data": {
"values":
},
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "RealTime",
"type": "temporal"
},
"y": {
"field": "AcY",
"type": "quantitative",
"scale": {
"zero": false
}
}
}
}
],
"resolve": {
"scale": {
"y": "independent"
}
}
}

UI