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 pletely new to me so help would be appreciated.

Thanks

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 pletely new to me so help would be appreciated.

Thanks

• javascript
• html
• websocket
• d3.js

• Could you please reformat the code? The second code block makes no sense to me … – filmor Commented Dec 2, 2012 at 19:17
• Related: stackoverflow./questions/13591891/… – rosshamish Commented Dec 2, 2012 at 19:26
• @filmor That function is from the D3 code example at: github./mbostock/d3/blob/master/examples/bubble/bubble.js. I think it's used to 'flatten' out the JSON structure if the original JSON document is nested. – user94628 Commented Dec 2, 2012 at 19:36
• @RossHamish, that's a question I also put up. I'm hoping that this would be a simpler way of asking it, as getting data in realtime seems to be my main problem. – user94628 Commented Dec 2, 2012 at 19:37

1 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; });

}