Simple example

by dmitrybezb

CSS

body {
    margin: 0;
    height: 100%;
}
svg {
    width: 100%;
    height: 100%;
}

JavaScript

var svg = d3.select('body').append('svg');

svg
    .append('text')
    .text('click somewhere')
    .attr('x', 50)
    .attr('y', 50);

var events = [];
svg.on('click', function () {
    events.push(d3.event);
    if (events.length > 5) events.shift();
    var circles = svg.selectAll('circle')
        .data(events, function (e) { return e.timeStamp })
        .attr('fill', 'gray');
    circles
        .enter()
        .append('circle')
        .attr('cx', function (d) { return d.x || d.pageX })
        .attr('cy', function (d) { return d.y || d.pageY })
        .attr('fill', 'red')
        .attr('r', 10);
    circles
        .exit()
        .remove();
});