d3_example.js

var svg = d3.select(element[0])
    .append('svg')
    .attr('width', '99%')
    .attr('height', '99%')
    .attr('style', 'border: 1px solid silver; position: absolute; top: 0px; left: 0px; z-index: 1001');

var data = []

var refresh = function () {
    var joints = svg
        .selectAll('.dot')
        .data(data, function (d) { return d.trackingId + "-" + d.handType; })
        .call(draw);

    function draw(joint) {
        joint.attr('class', 'dot')
            .style('fill', function (d) {
                return 'red';
            })
            .attr('cx', function (d) { return d.x; })
            .attr('cy', function (d) { return d.y; })
            .attr('r', function (d) { return 5; });
    }

    joints.enter()
        .append('circle')
        .call(draw);

    joints.exit()
        .remove();
}

server.on('interactionchanged', function (e) {
    data = e.handPointers;
    refresh();
});