index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1"></script>
    <style type="text/css">

div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 12px;
  padding: 8px;
  font: 10px sans-serif;
  background: #ddd;
  border: solid 1px #aaa;
  border-radius: 8px;
  pointer-events: none;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var w = 960,
    h = 500;

var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h);

svg.append("svg:g")
    .attr("transform", "translate(480,50)rotate(60)scale(2)")
  .append("svg:rect")
    .attr("width", 140)
    .attr("height", 140)
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseout", mouseout);

var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 1e-6);

function mouseover() {
  div.transition()
      .duration(500)
      .style("opacity", 1);
}

function mousemove() {
  div
      .text(d3.event.pageX + ", " + d3.event.pageY)
      .style("left", (d3.event.pageX - 34) + "px")
      .style("top", (d3.event.pageY - 12) + "px");
}

function mouseout() {
  div.transition()
      .duration(500)
      .style("opacity", 1e-6);
}

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

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png