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.
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 : Getting started with D3.js - DEV Community
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.
