Objects ordering

Hover on object to bring it to the front, click to take object to the background.

<!DOCTYPE html>
<meta charset="utf-8">

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius = 100;

var circles = d3.range(40).map(function() {
  return {
    x: Math.round(Math.random() * (width - radius * 2) + radius),
    y: Math.round(Math.random() * (height - radius * 2) + radius)
  };
});

var color = d3.scaleOrdinal()
    .range([ '#0D6F7F','#E07351', '#169E87', '#5D8222', '#97AF22', '#D2A825', '#DB5A33', '#DC5F5F', '#D86A87', '#CCCAC8']);

var firstChild;

svg.selectAll("circle")
  .data(circles)
  .enter().append("circle")
    .attr("cx", function (d) { return d.x; })
    .attr("cy", function (d) { return d.y; })
    .attr("r", radius)
    .style("fill", function (d, i) { return color(i); })
             .on("mouseover", function (d) {
                this.parentElement.appendChild(this); 
             })
            .on("click", function (d) {
                firstChild = this.parentNode.firstChild;
                if (firstChild) {
                    this.parentNode.insertBefore(this, firstChild);
                }
});

</script>

https://d3js.org/d3.v4.min.js