# Mapping 2d at Dashboard

**URL:** <https://discourse.nodered.org/t/mapping-2d-at-dashboard/2661>\
**Category:** Dashboard\
**Created:** [29 August 2018 14:54 UTC](https://discourse.nodered.org/t/mapping-2d-at-dashboard/2661 "2018-08-29T14:54:18Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Martin](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@Martin](https://discourse.nodered.org/u/Martin)\
**Post date:** [29 August 2018 14:54 UTC](https://discourse.nodered.org/t/mapping-2d-at-dashboard/2661/1 "2018-08-29T14:54:18Z")

</div>

Hello everyone!,

I'm new at node-red, so i'm sorry if am asking something wrong. i'd like to know if it's possible to make and show something like a X-Y map as the below picture.

 ![Map-of-the-experimental-area-used-in-the-2D-mapping-experiment-Blue-points-represent](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/fa5ea7ee0d56724950cfe520b01d99c0f59deda8.jpeg)

And if you don't mind, could you give me directions about it?.

Thanks for read and regards!.  
Martin

---

<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:** [30 August 2018 01:13 UTC](https://discourse.nodered.org/t/mapping-2d-at-dashboard/2661/2 "2018-08-30T01:13:00Z")

</div>

Your best friend is probably the library d3.js

> **[d3/d3](https://github.com/d3/d3/wiki/Gallery)**
>
> Bring data to life with SVG, Canvas and HTML. :bar\_chart::chart\_with\_upwards\_trend::tada: - d3/d3

Node-RED itself uses this library so it is already available out of the box (version 3.5.17).

How do you generate the dataset for the visualization ? Is it dynamic , real-time or pre stored in a database?

---

<div class="post-metadata">

**Author:** ![Martin](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@Martin](https://discourse.nodered.org/u/Martin)\
**Post date:** [30 August 2018 12:16 UTC](https://discourse.nodered.org/t/mapping-2d-at-dashboard/2661/3 "2018-08-30T12:16:44Z")

</div>

Hello Andrei, thanks for your reply. About the visualization, am taking some gps coordinates and i'd like to see it as a tracking. So i guess it may be draw some points and trace path.

i don't knew that node-red comes with something like that library, i guess it may be use like an ui\< template\>?

---

<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:** [30 August 2018 12:55 UTC](https://discourse.nodered.org/t/mapping-2d-at-dashboard/2661/4 "2018-08-30T12:55:35Z")

</div>

Hi, the library is used internally by Node-RED. The rectangle nodes you see in the editor, for instance, are drawn with the help of D3.js.

Indeed, if you want to use D3.js then you will use the UI template node.

Your use case is to plot GPS data in a map, so I recommend to check this pre-existing node:

> **[node-red-contrib-web-worldmap](https://flows.nodered.org/node/node-red-contrib-web-worldmap)**
>
> A Node-RED node to provide a web page of a world map for plotting things on.

---

<div class="post-metadata">

**Author:** ![Martin](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@Martin](https://discourse.nodered.org/u/Martin)\
**Post date:** [30 August 2018 13:15 UTC](https://discourse.nodered.org/t/mapping-2d-at-dashboard/2661/5 "2018-08-30T13:15:29Z")

</div>

Hello, wow!, that looks great, i guess it may be what i needed!!. gonna look it. thanks so much!! 😃