graph annotation - draggable clusters

Made with d3.annotation. An example showing how you can dynamically update the annotations on tick with a network graph.

this iteration that makes the nodes underneath the annotation circles draggable too 🖱🎉

  svg.selectAll('.annotation-subject')
    .style('pointer-events', 'none');

an iteration on the block d3-annotation: Encircling Example from @DataToViz

now with support for touch events 🎉

d3.select('body')
  .on('touchstart', noZoom)
  .on('touchmove', noZoom)

function noZoom() {
  d3.event.preventDefault();
}

thanks to @autiomaa for pointing out that touch support was missing before 😄

further reading on Event.preventDefault() the at the MDN docs and the w3c spec