circle selector by pbogden

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css" type="text/css">
  <title>circles</title>
  <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
</head>

<body>
<script>

var width= 960, height=500, pi = 3.14159, startOpacity = 0.4;

var angles = [ pi/3, pi, - pi/3 ];
var center = { x: width/2, y: height/2 };
var r = height/5,       // circle radius
    r0 = 0.8*r;         // circle displacement from center

var positions = [];
angles.forEach(function(theta){ 
    positions.push({ x: center.x + r0*Math.sin(theta), 
                     y: center.y - r0*Math.cos(theta)});
});

var g = d3.select("body").append('svg') 
    .append("g");                              // <g> container for shapes

g.append("rect")                               // plot a rectangle first
    .attr("width", width)
    .attr("height", height);

g.selectAll('circle')
    .data(positions)
  .enter()
    .append('circle')
    .attr('r', r)
    .attr('cx', function(d){ return d.x; })
    .attr('cy', function(d){ return d.y; })
    .style("fill", "blue")
    .style("fill-opacity", startOpacity)     // initialize fill-opacity here, or first toggle won't work
//    .on("mouseover", toggle)
//    .on("mouseout", toggle)
    .on("mouseover", showTooltip)
    .on("mousemove", moveTooltip)
    .on("mouseout",  hideTooltip);

// Create the tooltip div (there's only one)
var tooltip = d3.select("body")
    .append("div")
    .attr("class", "tooltip")
    .style("visibility", "hidden")
    .text("a simple tooltip");

function toggle() {
    if ( this.style.fillOpacity < 1 ) {
      this.style.fillOpacity = "1";
    } else {
      this.style.fillOpacity = "0.5";
    };
}

function showTooltip(d) {
    this.style.fillOpacity = "0.8";
    tooltip.style("visibility", "visible");
    tooltip[0][0].innerHTML = "Hello,<br>world!";
    tooltip.style("top", (d3.event.pageY-10)+"px")
           .style("left",(d3.event.pageX+20)+"px");
};

function moveTooltip(d) {
    tooltip.style("top", (d3.event.pageY-10)+"px")
           .style("left",(d3.event.pageX+20)+"px");
};

function hideTooltip(d) {
    this.style.fillOpacity = startOpacity;
    tooltip.style("visibility", "hidden");
};

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

styles.css


body, svg {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 960px;
  height: 500px;
  position: relative;
}

circle, rect {
  stroke: black;
  stroke-width: 2px;
  fill: 'blue';
  fill-opacity: 0.1;
}

.tooltip {
    margin: 30px 30px 30px 30px;
    background-color: lightgray;
    border-style: solid;
    padding: 10px 10px 10px 10px;
    font-size: 1.5em;
    position: absolute;
    z-index: 100;
}