# 3D plot in NodeRed

**URL:** <https://discourse.nodered.org/t/3d-plot-in-nodered/4602>\
**Category:** Dashboard\
**Created:** [6 November 2018 09:17 UTC](https://discourse.nodered.org/t/3d-plot-in-nodered/4602 "2018-11-06T09:17:42Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![e0003315](https://avatars.discourse-cdn.com/v4/letter/e/ecd19e/32.png) [@e0003315](https://discourse.nodered.org/u/e0003315)\
**Post date:** [6 November 2018 09:17 UTC](https://discourse.nodered.org/t/3d-plot-in-nodered/4602/1 "2018-11-06T09:17:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [6 November 2018 10:43 UTC](https://discourse.nodered.org/t/3d-plot-in-nodered/4602/2 "2018-11-06T10:43:31Z")

</div>

did you try a search in the flows?

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [6 November 2018 16:57 UTC](https://discourse.nodered.org/t/3d-plot-in-nodered/4602/3 "2018-11-06T16:57:11Z")

</div>

> [@e0003315](#):
>
> A flow example will be great!

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](https://dev.to/rxhl/getting-started-with-d3js-390)

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

```auto
[{"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:

 ![scatter-01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/51104d0f3b3b80e76783dd41095862cc68e71749.png)

---

<div class="post-metadata">

**Author:** ![e0003315](https://avatars.discourse-cdn.com/v4/letter/e/ecd19e/32.png) [@e0003315](https://discourse.nodered.org/u/e0003315)\
**Post date:** [10 November 2018 15:49 UTC](https://discourse.nodered.org/t/3d-plot-in-nodered/4602/4 "2018-11-10T15:49:27Z")

</div>

tried but i could not find an example to work on

---

<div class="post-metadata">

**Author:** ![e0003315](https://avatars.discourse-cdn.com/v4/letter/e/ecd19e/32.png) [@e0003315](https://discourse.nodered.org/u/e0003315)\
**Post date:** [10 November 2018 15:50 UTC](https://discourse.nodered.org/t/3d-plot-in-nodered/4602/5 "2018-11-10T15:50:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [10 November 2018 15:53 UTC](https://discourse.nodered.org/t/3d-plot-in-nodered/4602/6 "2018-11-10T15:53:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![e0003315](https://avatars.discourse-cdn.com/v4/letter/e/ecd19e/32.png) [@e0003315](https://discourse.nodered.org/u/e0003315)\
**Post date:** [10 November 2018 16:26 UTC](https://discourse.nodered.org/t/3d-plot-in-nodered/4602/8 "2018-11-10T16:26:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [10 November 2018 16:45 UTC](https://discourse.nodered.org/t/3d-plot-in-nodered/4602/9 "2018-11-10T16:45:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![e0003315](https://avatars.discourse-cdn.com/v4/letter/e/ecd19e/32.png) [@e0003315](https://discourse.nodered.org/u/e0003315)\
**Post date:** [10 November 2018 16:51 UTC](https://discourse.nodered.org/t/3d-plot-in-nodered/4602/10 "2018-11-10T16:51:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [10 November 2018 17:26 UTC](https://discourse.nodered.org/t/3d-plot-in-nodered/4602/11 "2018-11-10T17:26:43Z")

</div>

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:  
 ![3dplot](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/30a3419dee9a88a77b52b81466f172a76aff7aeb.png)  
(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.

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [10 November 2018 17:42 UTC](https://discourse.nodered.org/t/3d-plot-in-nodered/4602/12 "2018-11-10T17:42:32Z")

</div>

> [@zenofmud](#):
>
> 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:

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

---

<div class="post-metadata">

**Author:** ![e0003315](https://avatars.discourse-cdn.com/v4/letter/e/ecd19e/32.png) [@e0003315](https://discourse.nodered.org/u/e0003315)\
**Post date:** [11 November 2018 00:47 UTC](https://discourse.nodered.org/t/3d-plot-in-nodered/4602/13 "2018-11-11T00:47:24Z")

</div>

ok sure. thanks so much for the help.