title: Map + Legend on same svg
body: <p>I've been trying for a week now to realize this <a href="http://plnkr.co/edit/4SkEQjiAk0GaagmfcIw1?p=preview" rel="nofollow noreferrer">Map+Legend</a></p>
  
  <p>I still can't display correctly my legend </p>
  
  <p>when i follow this</p>
  
  <pre><code>var legend = svg.selectAll("g.legend")
    .data(extent_color_domain)
    .enter().append("g")
    .attr("class", "legend");
  
    var ls_w = 20, ls_h = 20;
  
    legend.append("rect")
    .attr("x", 20)
    .attr("y", function(d, i){ return h - (i*ls_h) - 2*ls_h;})
    .attr("width", ls_w)
    .attr("height", ls_h)
    .style("fill", function(d, i) { return color(d); })
    .style("opacity", 0.8);
  
    legend.append("text")
    .attr("x", 50)
    .attr("y", function(d, i){ return h - (i*ls_h) - ls_h - 4;})
    .text(function(d, i){ return legend_labels[i]; });
  </code></pre>
  
  <p>Legend is displayed first then map appears and overwrites it</p>
  
  <p>I'd like to have map and legend displayed at the same time and legend displayed on the right-bottom corner of the map (where blank space is located)</p>
  
  <p>I read a lot about z-index so i tried many things on the css part of my .legend but can't figure it out</p>
  
  <p><a href="http://plnkr.co/edit/4SkEQjiAk0GaagmfcIw1?p=preview" rel="nofollow noreferrer">Here's my plunker</a></p>
  
  <p>Thank you so much for your help and for explaining to me what my mistakes are</p>