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…

Accepted Answer

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

}
```

Real-time data with D3

Solution

Problem