title: Combining object positioning and labeling in D3.js
body: <p>I'm new to D3js and (probably foolishly) am exploring its value as a simple navigation tool. I <a href="http://d3.geotheory.co.uk/linking.html" rel="nofollow">have managed to cobble together a basic page that works</a>, but it seems rather verbose and I'm wondering if anyone has any pointers how it might be reworked to be more elegant and possibly integrate the label and circle plotting functions?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;head&gt;
      &lt;script type="text/javascript" src="scripts/d3.v3.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="viz"&gt;&lt;/div&gt;
      &lt;div id="status" style="position:fixed;bottom:0;left:0;
          color:white;background-color:grey;font-size:small"&gt;&lt;/div&gt;
      &lt;script type="text/javascript"&gt;
  
      // functions for adding a 'status' box with link info
      function addStatus(targetURL){document.getElementById('status').innerHTML=targetURL;}
      function clearStatus(){document.getElementById('status').innerHTML=null;}
  
      var sampleSVG = d3.select("#viz")
          .append("svg")
          .attr("width", 500)
          .attr("height", 200);
  
      var dataset =  [[100, 100, "http://google.com/", "Google"],
                      [300, 100, "http://yahoo.com/", "Yahoo"]];
  
      // Add labels
      sampleSVG.selectAll("text")
          .data(dataset)
          .enter().append("text")
          .attr("text-anchor", "middle")
          .attr("x", function(d){return d[0]})
          .attr("y", function(d){return d[1]})
          .text(function(d) {return d[3];});
  
      // Add circles and functionality
      sampleSVG.selectAll("circle")
          .data(dataset)
          .enter().append("circle")
          .style("fill", "transparent")
          .style("stroke", "grey")
          .style("stroke-width", 3)
          .attr("r", 50)
          .attr("cx", function(d){return d[0]})
          .attr("cy", function(d){return d[1]})
           .on("mouseover", 
               function(d){ d3.select(this).style("stroke", "black");
               addStatus(d[2]); }
               )
           .on("mouseout", 
               function(){
                   d3.select(this).style("stroke", "grey");
                   clearStatus(); } )
          .on("mouseup", function(d){window.location = d[2];});
  
  
      &lt;/script&gt;
      &lt;!-- ... --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>