d3 MQTT Tree visualiser updated

I’ve been having a bit of a play updating my d3 based MQTT topic tree visualiser this weekend.

  1. I’ve been trying to tidy things up a bit and break the code out into a little standalone library and only leave the MQTT connection code in the index.html.
  2. I’ve been improving the handling of long payload. There is now a nicer popup tooltip with a longer version of the payload, it’s still cropped at 100 chars but I’m still working on wrapping it and showing a few lines to get more in.
  3. I’ve been moving the MQTT connection code over to use binary WebSocket connections* rather than the JSON based proxy I was using before. The version hosted here is still using the proxy for now, but the binary versions work and I’ll move it over once I’ve finished playing with my internal broker setup.

I still need to try and make the whole thing resize or at least not have hard coded dimensions, but that might have to wait for next time.

I’ve stuck the updated version up here, I’ll stick the code up on github once I get sign off from the boss.


* There is a new IBM WebSphere MQ feature pack supporting this, details can be found here

3 thoughts on “d3 MQTT Tree visualiser updated”

  1. Hi, could you please point me where should I specify the host&port variables?

    Should it be inside the index.html file:

    var client = new Paho.MQTT.Client(options.host,options.port,options.clientID);

    Or is there any other proper place?
    Thank you

    1. Yes, slightly higher up in index.html there is the declaration of the options variable, there is sets the host and the port to match the hostname and port number the file was loaded from. If you want to hard code those values there is where you make the change.

      1. Thank you. It worked.
        I just need configure the host/port editing index.html, and also had to enable ws at mosquitto server because I didn’t figure it how to use D3 MQTT TREE VISUALISER without ws.

        Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.