Exploring Sensor Information with Vis.js

In my work with Wireless Sensor Networks, I have been collecting sensor addresses and their corresponding temperature readings in JSON format. The data looks like this:

{"eui":"c10c00000000007b","count":0"tmp102":" 0.0000 C"}

When it comes to the network connection, I also retrieve information about the Parent Node and the next destination in a JSON format (using CoAP on the Ubuntu Gnome Terminal), which is similar to HTTP but more lightweight.

{"Dest":"aaaa::c30c:0:0:7b","Next":"fe80::c30c:0:0:7b"}

For more details, please check out my repository.

I am interested in creating a visualization of the sensor network topology, ideally with interactive features like displaying the last sensed value when clicking on a sensor. Currently, I am saving the data in a .JSON file and considering using Vis.js for visualization, although I am new to it. I have also come across GephiJSON as an example, but I am struggling to understand its implementation.

Any helpful tips or guidance would be greatly appreciated.

Answer №1

To import your data into vis.js, you will need to convert it into the specific format that vis.js recognizes: a node array like [{id: 1, label: 'Node 1'}, ...] and an edge array like [{from: 1, to: 2}, ...]. Implementing event listeners can help you detect events such as select, allowing you to show additional details about the chosen node in a sidebar or similar element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Organizing a series of objects into groups of four for processing

I have a task of organizing an array of objects that represent game players by assigning each player to a group number based on their current group value. The challenge is to ensure that each group has as close to four players as possible, while also acco ...

Activate automatic selection when the input field is disabled

How can I enable auto-select for text in an input field even when it is disabled? Currently, the auto select feature doesn't work when the field is disabled. Here is my HTML: <input type="text" class="form-control" ng-model="gameId" select-on-cli ...

Unable to set an onclick function within a customized dojo widget

I have a custom widget that I've defined as shown below: dojo.declare('myWidget', [dijit._WidgetBase, dijit._Templated], { 'templateString':'<span>' + '<a dojoAttachPoint="linkNode" href="b ...

[Error]: Unable to access the 'getCroppedCanvas' property as it is undefined in React Cropper

I am currently utilizing the "React Cropper" library (https://www.npmjs.com/package/react-cropper). I have included this code snippet (similar to many examples): import React from 'react'; import Cropper from 'react-cropper'; export ...

Forcing the Empty Table message in jQuery DataTables post an AJAX request

My configuration for jquery-datatables includes a custom search filter that acts as both the standard keyword filter and a specific Item ID search using an ajax call to retrieve a value from the back end, which is then used to search a particular column in ...

Making a REST call with values containing an apostrophe

Currently, I am utilizing REST and ajax to retrieve data from SharePoint using the URL below: https:xxxxxxxx/_vti_bin/ListData.svc/RMSD_Tasks?$orderby=IssueValue asc,StatusValue desc&$filter="+dropValue+" eq '"+secondFilterVal+"'&groupby ...

Check the Full Calendar to see if any events are scheduled for today

I have a group of users who need to save their availability. Currently, I am utilizing Full Calendar and looking for a way to prevent them from adding the same event multiple times on a single day. My tech stack includes VueJs and all events are stored in ...

"Encountering a "404 Error" while Attempting to Sign Up a New User on React Application - Is it a Routing or Port Problem

While working on my React-Express application, I'm facing a "404 (Not Found)" error when attempting to register a new user. It seems like there might be an issue with routing or configuration of the Express server. Being new to React and Express, it&a ...

Menu Options in Material UI Navbar

I am currently working on incorporating an icon in my navbar that, when clicked, will reveal a dropdown list of notifications. Although I have come across several code examples for dropdown menus, none of them have completely assisted me or provided specif ...

What is the best way to turn off default CSS styling in KendoUI?

I am facing an issue in my application where I am using global CSS definitions for "INPUT", "SELECT", and other elements. The problem arises when I try to incorporate KendoUI widgets, as they override my default CSS styles. For instance, my CSS code looks ...

Is there a way to track when the Angular DTOptionsBuilder ajax call is complete and trigger a callback function?

Working with angular datatables, I have the following code: beforeSend:</p> success callback causes the table on the page not to populate with the data. How can I implement a callback that triggers once the ajax is done without interfering with the ...

Setting up React Native on a Mac M1 device

I am currently setting up React Native on my MacBook M1 Despite having installed npm, JDK, Node, Rosetta, CocoaPod, VSCode, Android Studio, Xcode and more, when I try to run the command (npm start), the directories for iOS and Android are not present. The ...

Encountered this issue: nw_protocol_get_quic_image_block_invoke dlopen libquic failed

I encountered an issue while attempting to link my API data and display it in the cell. Despite my efforts, I continuously receive a response of == nil. The following code snippets outline the Country.SWIFT // Model.SWIFT // Response.SWIFT components that ...

Difficulty arises in bookmarking slug paths within Next.js SSG

I am currently managing a next js SSG exported application that is operating in nginx. My objective is to transfer it to S3 in the near future. However, I have encountered an obstacle where the slug paths cannot be bookmarked in a browser. Although the ro ...

What is the best way to establish a default rejected promise behavior for all of my Express middleware functions?

Using promises within express middleware and wanting to switch to async/await methods. app.get('/data1',async function(req,res) { data = await getData1(); // Error occurs here res.send(data) }) app.get('/data2',async function(r ...

Mistakes within the react-router-dom package

I have been trying to connect MongoDB Realm to React by following a tutorial. Unfortunately, the tutorial is outdated and I encountered errors while trying to run the code. Initially, I received a warning stating that the leaf route does not have an elemen ...

How can we change a jQuery document click function to an inline onclick function?

Under certain circumstances, I have to refactor my click function into a standalone function and trigger it using inline onClick="myFunction();" This is my current code structure: $(document).on('click','.exBtn', function(){ var ex = ...

Setting limits on values in jQuery

Hello everyone, I'm trying to establish a limit for each progress bar within Bootstrap 4 that triggers upon clicking. The issue lies in the fact that every time I click, the value always jumps to 100. Is there a way to set a maximum value for each p ...

Swift - Extract specific information

Looking to extract the details of desc from the API response below. I aim to retrieve each a and b, which will be utilized in a mathematical addition application. Data received from the server [ { "id": 226, "name": "chorename", ...

Exploring JSON dictionary access using Alamofire and encapsulated variables within a Swift model

I've been struggling with a seemingly simple issue that's driving me crazy. I managed to parse an array of data from a JSON file to populate a table view and collection view, but now I'm stuck trying to load a dictionary into my model. { la ...