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

forked from <a href='http://bl.ocks.org/micahstubbs/'>micahstubbs</a>'s block: <a href='http://bl.ocks.org/micahstubbs/f32a742947f259d12eb999d418a767fb'>graph annotation - draggable clusters</a>