title: how to get information during mouseover in d3
body: <p>I am using and working on d3 chart. Now my functionality is I create a div dynamically and put the color in div using scale.<br>
  Linear it's working fine now my need is i need like google pinrest like location notify i put it in all div when i mouseover it i need to show what color name code is there in particular div help how to do this.</p>
  
  <p>Here attached my code and what image should be placed inside the div just for refrence any image can placed inside the div</p>
  
  <p>fiddle: <a href="http://jsfiddle.net/TMCby/12/" rel="nofollow noreferrer">http://jsfiddle.net/TMCby/12/</a></p>
  
  <p><strong><em>Snippet:</em></strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style type="text/css" media="screen"&gt;
      div {
        width: 60px;
        height: 60px;
        float: left;
        margin: 1px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;script src="http://d3js.org/d3.v3.js"&gt;&lt;/script&gt;
  
    &lt;script type="text/javascript"&gt;
      debugger;
      var body = d3.select("body"),
        length = 10,
        color = d3.scale.linear().domain([1, length])
  
        .range(["blue", "red"]);
  
  
      for (var i = 0; i &lt; length; i++) {
        body.append('div').attr('style', function(d) {
          return 'background-color: ' + color(i);
        });
      }
    &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>