Real-Time IoT Data Visualization with Arduino 101 and MEAN Stack
Published: February 4, 2018 · Last updated: February 4, 2018
Figure 1: Arduino 101
Overview
This project demonstrates a real-time IoT system built around an Arduino 101 (based on the Intel Curie module) and a MEAN stack (MongoDB, Express, AngularJS, and Node.js) backend. The Arduino collects motion data—including accelerometer and gyroscope readings—and broadcasts it over Bluetooth Low Energy (BLE).
A client device connects to the Arduino over BLE, receives the sensor data, and forwards it over Wi-Fi to a Node.js server. The server stores the data in MongoDB while simultaneously streaming it to a web dashboard for real-time visualization.
The dashboard also allows users to remotely adjust the Arduino's sampling frequency. Configuration changes are sent back through the same communication pipeline and are reflected almost immediately in both the incoming sensor data and the live graphs.
The diagram below illustrates the overall system architecture.
Architecture
Arduino 101
The Arduino firmware is written using the CurieBLE and CurieIMU libraries. The board acts as a BLE peripheral and exposes a single service containing seven characteristics:
- Six read-only characteristics for acceleration (
ax,ay,az) and gyroscope (gx,gy,gz) data - One writable characteristic for the sampling frequency (
ts)
Each characteristic is identified by a unique UUID, allowing the client to read values, write configuration data, or subscribe to notifications.
Client Device
A Node.js application uses the Noble library to discover and connect to the Arduino over BLE. Once connected, it subscribes to the BLE service and enables notifications for all sensor characteristics.
The client streams sensor data and sampling frequency updates to the Node.js server using Socket.io.
Why Socket.io instead of raw WebSockets?
Socket.io was chosen because it provides an event-driven API, automatic reconnection, and multiple logical event streams over a single connection, making real-time communication simpler than using raw WebSockets.
Server & Web Interface
The backend is built with Node.js and Express. Incoming sensor data is received through Socket.io, stored in MongoDB, and immediately broadcast to connected web clients.
The frontend is built with AngularJS and styled using Bootstrap. Google Charts is used to display live accelerometer and gyroscope data as it arrives.
Users can also change the Arduino's sampling frequency directly from the webpage. Sampling frequency updates travel back through the same communication pipeline and are reflected almost immediately in the incoming sensor stream.
Demo & Source Code
Summary
This project demonstrates a complete end-to-end IoT pipeline, from collecting sensor data on an Arduino 101 to visualizing it in a browser in real time. By combining BLE communication, a MEAN stack backend, MongoDB, Socket.io, and Google Charts, the application provides live monitoring while also allowing users to remotely configure the device. It serves as a practical example of integrating embedded hardware with modern web technologies to build responsive IoT applications.