dragging vs actually zooming with d3.behavior.zoom()

<!DOCTYPE HTML>
<html>
  <style>
    body, html{ margin: 0; }
    text{ font-size: 20px; }
  </style>
  <body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script>
      var w = 800, h = 800
        , x = d3.scale.linear().domain([0, w]).range([0, w])
        , y = d3.scale.linear().domain([0, h]).range([0, h])
        , r = 100
        , prevScale = 1
        , zoom = d3.behavior.zoom(svg).x(x).y(y).scaleExtent([1, 10])
          .translate([w / 2, h / 2])
          .on('zoom', function(){
            var t = zoom.translate(), s = zoom.scale()
            if(prevScale !== s) label.text('scaling!!')
            else label.text('dragging!')
            prevScale = s
            circle.attr({ cx: t[0], cy: t[1], r: r * s })
          })
        , svg = d3.select('body').append('svg')
          .attr({width: w, height: h }).call(zoom)
        , circle = svg.append('circle').attr({cx: w / 2, cy: h / 2, r: 100 })
        , label = svg.append('text').attr({y: 40, x: 40})
          
    </script>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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