understanding mouse events

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <style>
    body, html{
      width: 100%;
      height: 100%;
      margin: 0;
    }
    svg{

}
    circle{
      stroke: #333;
      fill: #666;
    }
  </style>
  <body>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
var width = window.innerWidth, height = window.innerHeight
var svg = d3.select('body').append('svg')
  .attr({width: width, height: height})

var root = svg.append('g')
  .attr('transform', 'translate(' + [width/2, height/2] + ')')
  .call(function(g){ g.append('circle').attr('r', 50) })
  .on('mouseover', function(){
    console.log("mouse over")
    d3.select(this).select('g').style('opacity', 1)
  })
  .on('mouseleave', function(){
    console.log("mouse leave")
    d3.select(this).select('g').style('opacity', 0)
  })
  .append('g')
    .attr('transform', 'translate(' + [20, 20] + ')')
    .style('opacity', 0)
    .call(function(g){ g.append('circle').attr('r', 50) })
    .on('mouseover', function(){
      console.log("mouse over")
      d3.select(this).select('g').style('opacity', 1)
    })
    .on('mouseleave', function(){
      console.log("mouse leave")
      d3.select(this).select('g').style('opacity', 0)
    })
    .append('g')
      .attr('transform', 'translate(' + [20, 20] + ')')
      .style('opacity', 0)
      .call(function(g){ g.append('circle').attr('r', 50) })
      .on('mouseover', function(){
        console.log("mouse over")
        d3.select(this).select('g').style('opacity', 1)
      })
      .on('mouseleave', function(){
        console.log("mouse leave")
        d3.select(this).select('g').style('opacity', 0)
      })
      .append('g')
        .attr('transform', 'translate(' + [20, 20] + ')')
        .style('opacity', 0)
        .call(function(g){ g.append('circle').attr('r', 50) })
    .on('mouseover', function(){
      console.log("mouse over")
      d3.select(this).select('g').style('opacity', 1)
    })
    .on('mouseleave', function(){
      console.log("mouse leave")
      d3.select(this).select('g').style('opacity', 0)
    })
    .append('g')
      .attr('transform', 'translate(' + [20, 20] + ')')
      .style('opacity', 0)
      .call(function(g){ g.append('circle').attr('r', 50) })
    .on('mouseover', function(){
      console.log("mouse over")
      d3.select(this).select('g').style('opacity', 1)
    })
    .on('mouseleave', function(){
      console.log("mouse leave")
      d3.select(this).select('g').style('opacity', 0)
    })
    .append('g')
      .attr('transform', 'translate(' + [20, 20] + ')')
      .style('opacity', 0)
      .call(function(g){ g.append('circle').attr('r', 50) })
    .on('mouseover', function(){
      console.log("mouse over")
      d3.select(this).select('g').style('opacity', 1)
    })
    .on('mouseleave', function(){
      console.log("mouse leave")
      d3.select(this).select('g').style('opacity', 0)
    })
    .append('g')
      .attr('transform', 'translate(' + [20, 20] + ')')
      .style('opacity', 0)
      .call(function(g){ g.append('circle').attr('r', 50) })
    .on('mouseover', function(){
      console.log("mouse over")
      d3.select(this).select('g').style('opacity', 1)
    })
    .on('mouseleave', function(){
      console.log("mouse leave")
      d3.select(this).select('g').style('opacity', 0)
    })
    .append('g')
      .attr('transform', 'translate(' + [20, 20] + ')')
      .style('opacity', 0)
      .call(function(g){ g.append('circle').attr('r', 50) })
    .on('mouseover', function(){
      console.log("mouse over")
      d3.select(this).select('g').style('opacity', 1)
    })
    .on('mouseleave', function(){
      console.log("mouse leave")
      d3.select(this).select('g').style('opacity', 0)
    })
    .append('g')
      .attr('transform', 'translate(' + [20, 20] + ')')
      .style('opacity', 0)
      .call(function(g){ g.append('circle').attr('r', 50) })

</script>
  </body>
</html>

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

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