3D plot in NodeRed


Hi, Does anyone know how to plot a 3d scatter plot in node red? A flow example will be great! I want to create a plot that allows inputs and update in real time.

D3.js assistance

did you try a search in the flows?


Library D3.js is perfect for this purpose. Just be aware that the learning curve is steep.

Here is a link to a simple tutorial : https://dev.to/rxhl/getting-started-with-d3js-390

The flow (a simple node in this case) just to get you started:

[{"id":"fea67ae1.00c7d8","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"ac54d25.d7bdd3","type":"ui_template","z":"fea67ae1.00c7d8","group":"2b2994af.6664bc","name":"","order":0,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html>\n    <head>\n        <title>Scatter Plot</title>\n    <script src=\"https://d3js.org/d3.v4.min.js\"></script>\n        <style>\n        .axis {\n                fill: none;\n                stroke: black;\n                shape-rendering: crispEdges;\n        }\n        </style>\n    </head>\n    <body>\n        <div id=\"plot\"></div>\n\n        <script>\n\n        var dataset = [[5, 20, 30], [480, 90, 20], [250, 50, 100], [100, 33, 40], [330, 85, 60]];\n\n\n        var w = 500, h = 500, pad = 50;\n\n        var svg = d3.select(\"#plot\")\n            .append(\"svg\")\n        .attr(\"height\", h)\n        .attr(\"width\", w);\n\n        var xScale = d3.scaleLinear()\n        .domain([0, d3.max(dataset, function(d) { return d[0]; })])\n        .range([pad, w - pad]);\n\n        var yScale = d3.scaleLinear()\n            .domain([0, d3.max(dataset, function(d) { return d[1]; })])\n            .range([h - pad, pad]);\n\n        var rScale = d3.scaleLinear()\n            .domain([0, d3.max(dataset, function(d) { return d[2]; })])\n            .range([1, 30]);\n\n        var xAxis = d3.axisBottom(xScale);\n        var yAxis = d3.axisLeft(yScale);\n\n        var circ = svg.selectAll(\"circle\")\n            .data(dataset)\n            .enter()\n            .append(\"circle\")\n                .attr(\"cx\", function(d) { return xScale(d[0]); })\n                .attr(\"cy\", function(d) { return yScale(d[1]); })\n                .attr(\"r\", function(d) { return rScale(d[2]); })\n                .attr(\"fill\", \"blue\").attr(\"opacity\", 0.5);\n\n        svg.append(\"g\")\n            .attr(\"class\", \"axis\")\n            .attr(\"transform\", \"translate(0,\" + (h - pad) + \")\")\n            .call(xAxis);\n\n        svg.append(\"g\")\n            .attr(\"class\", \"axis\")\n            .attr(\"transform\", \"translate(\" + pad +\", 0)\")\n            .call(yAxis);\n        </script>\n    </body>\n</html>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":440,"y":180,"wires":[[]]},{"id":"2b2994af.6664bc","type":"ui_group","z":"","name":"G1","tab":"34172977.3cf3b6","disp":true,"width":"24","collapse":false},{"id":"34172977.3cf3b6","type":"ui_tab","z":"","name":"Field","icon":"dashboard"}]

and this is how the graph will looks like on Node-RED:


tried but i could not find an example to work on


This looks promising, but how do i add data into the node such that it updates real time


Had you searched the flow library like I originally suggested you miglt have found this

EXAMPLE: How to create a Bubble chart (can be used as basis for scatter plot too)

The attached flows demonstrates how to create a Bubble chart with both static data, variable data and growing variable data.


oh ok i have just found it. However, i can see that it uses Chart.js, Does Chart.js contain 3d ploting? or do i need to use other librarys like d3.js as mentioned above. Sorry for the trouble as i am new to javascript.


Have you tried the flows? Have you looked at them?


yes sir, i am looking them now. however, i am having difficulty changing to a 3d plot with my limit javascript knowledge.


Let's backup for a moment. When you say you want a 3D plot, are you saying you want to see three lines on the chart where depth is displayed like this:
(NOTE: image taken from plot.ly demo)

If so then I am unaware of any way to do it in Node-RED. That doesn't mean it can't be done, but you will probably have to do some digging and testing to see if you can. That is what I had to do to figure out how to use chart.js to generate the graphs I did. You might be able to use the example as a basis to creating a 3D plot.


Good point. I (mistakenly) suggested D3.js but such library will not help with 3D plots.


ok sure. thanks so much for the help.