title: Clickable datapoints that launches closeable modal window in d3 chart (nvd3)
body: <p>First of all I want to thank the community here your the help I've received.</p>
  
  <p>I'm building a custom version of the example here <a href="http://nvd3.org/ghpages/scatter.html" rel="nofollow">http://nvd3.org/ghpages/scatter.html</a> </p>
  
  <p>Is there a way to make each circle be a clickable link? and then when you click the link, have a modal popup that appears originating from the circle? with a close button on the modal.</p>
  
  <p>I know that sounds complicated but I'm just having a hard time navigating that NVD3 library, has it been deprecated/abandoned? I cannot find any documentation on it. I've read Scott Murray's guide but it seems like the NVD3 library has been heavily modified, most of what I read from Scott Murray isn't really applying in this example.</p>
  
  <p>my example page is here <a href="http://goo.gl/pUKW9" rel="nofollow">http://goo.gl/pUKW9</a> and the code i have is....</p>
  
  <pre><code>&lt;div id="offsetDiv"&gt;
    &lt;div id="test1" class="chartWrap"&gt;
      &lt;svg&gt;&lt;/svg&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
  //Format A
  var chart;
  
  nv.addGraph(function() {
    chart = nv.models.scatterChart()
                  .showDistX(true)
                  .showDistY(true)
                  //.height(500)
                  .useVoronoi(true)
                  .color(d3.scale.category10().range());
  
    chart.xAxis.tickFormat(d3.format('.02f'))
    chart.yAxis.tickFormat(d3.format('.02f'))
  
    d3.select('#test1 svg')
        .datum(randomData(4,40))
      .transition().duration(500)
        .call(chart)
  
  
    nv.utils.windowResize(chart.update);
  
    chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
  
    return chart;
  });
  
  
  function randomData(groups, points) { //# groups,# points per group
  var data = [
  {key: 'Weak Guidance', values: [
  {x: 1, y: 1}
  , {x: 2, y: 3}
  , {x: 4, y: 9    }]},
  
  {key: 'Strong Guidance', values: [
  {x: 32, y: 0}
  , {x: 3, y: 54}
  , {x: 1, y: 8}  ]              }];
  
    return data;
  }
  
  
  &lt;/script&gt;
  </code></pre>