Tag Archives: d3

pi4jmultimeter: Raspberry Pi + Arduino + d3js electrical multimeter

As a fun project and as an example for my recent talk at the Jazoon conference, I’ve made this device. I call it my pi4jmultimeter.

 What it does its some basic electrical multimeter features:

  • DC voltage measurement
  • AC waveline preview
  • AC spectrum analysis
  • Electrical resistance measurement

The device is a combination of a Raspberry Pi and an Arduino. The Arduino does the analog readings and uses Fast Fourier Transformation for producing the spectrum graph data. The Raspberry Pi hosts the main process and runs a lighttd web server. Both devices are connected with their extension headers (Raspberry Pi’s GPIO and Arduino’s Vin, GND and serial port pins) and have a paired serial port interface. The end result is visualized in a JavaScript web application which renders optimized d3js animated SVG graphs.

The Arduino loops a program which does simple analog reads on three inputs, periodical FFT and sends all this data to the Raspberry Pi via the serial interface. The Raspberry Pi, has a running Java8 SE Embedded process based on the pi4j and Java WebSocket libraries. It reads everything from the serial port with the help of the pi4j library, packs everything in a nice JSON format and broadcasts the data to every opened WebSocket connection by the use of the Java WebSocket library.

The whole source code with the build instructions can be found on GitHub: https://github.com/hsilomedus/pi4jmultimeter
The slides of my presentation are available at the jazoon guide webpage:  (or directly at slideshare)

The d3js graphs can be observed and used individually. All the graphs populated with some random data can be found here:


Electrical field lines and Equipotential surfaces simulation (with d3.js)

The JavaScript simulation here. Definition of an electric field and the corresponding equations here.


Each point of an electric field created by multiple dot or sphere charges can be computed as a superposition of the individual electrical force vectors. The individual forces are proportional to the charge value, and inversely proportional to the distance of the charge and the point, squared. Depending on the polatiry, the vector is moving away (positive) or back (negative).

The electrical potential again can be calculated with superposition, except that it’s a scalar value, not a vector one. The set of points which have the same potential, create a equipotential surface. Each force vector is normal to the equipotential surface at the same point.

d3.js offers functionalities for rendering svg lines and circles, and also dynamically add and control DOM elements. Combined, the simulation. For source code, right click – > view source.

Note: used d3.js example for hints.

Visualize with d3.js

For this year’s JavaDay event in Skopje, I made an interesting JavaScript presentation about the d3.js library.

I’ve tried to cover some of of the basics (manipulation, DOM editing), d3 specific patterns (data enter / update / exit), custom drawing and also explained some of the examples present in the gallery (bar graph, force graph, tree, voronoi).

The presentation itself is made in JavaScript and uses d3, bootstrap and jQuery as a dependency for bootstrap.

The presentation can be seen here, while the whole code can be downloaded at GitHub.