Real-time data with D3

Question

I was wondering if I could use the D3 library with real-time data my server would be sending via websockets. I can't see any documentation or examples that demonstrate this. My initial expectation was to do so by the following sample from code:

ws = new WebSocket(ws://localhost:8888/ma");   
some more code....

  ws.onmessage = function(evt) {
        d3.json("evt.data", function(json) {
......    
.......More code.....
......
 }
}

But this doesn't seem to work, but I know the client receives the data by checking the console log.

Furthermore there is a recursive function which flattens out a JSON document:

// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
var classes = [];

function recurse(name, node) {
  if (node.children) node.children.forEach(function(child) { recurse(node.name, child);    });
  else classes.push({packageName: name, className: node.name, value: node.size});
  }

  recurse(null, root);
  return {children: classes};   
}

     console.log(evt.data);
  };

  ws.onclose = function (evt) {
       alert("Connection terminated")};

  });
 });

If my JSON doc is flat already then I presume it won't be required ie:

{ID: 1, Name: 'my name', age: 65, car: 'Ford'}

D3 is completely new to me so help would be appreciated.

Thanks

Answer 1

I haven't used websockets with D3 (yet) but it looks like you're expecting d3.json to be a JSON parser. It's not - it's an AJAX loader that delegates to JSON.parse for parsing. So you probably want something like:

var ws = new WebSocket("ws://localhost:8888/ma");

var data = [];

ws.onmessage = function(evt) {
    // append new data from the socket
    data.push(JSON.parse(evt.data));
    update();
};

// now use the standard join pattern to deal with updates
function update() {
    var chunk = d3.selectAll('p')
        .data(data);

    // entry might be all you need, if you're always appending
    chunk.enter().append('p')
        .text(function(d) { return d; });

}