Untitled

<!DOCTYPE html>
<meta charset="utf-8">

<link href="./styles/nv.d3.css" rel="stylesheet" type="text/css">

<style>
body {
  overflow-y:scroll;
  margin: 0;
  padding: 0;
}
svg {
  overflow: hidden;
}
div {
  border: 0;
  margin: 0;
}

 .hidden-point
 {
  visibility: none;
 }

 #chart svg {
  height: 400px;
}


</style>

<body>

<div id="chart">
  <svg></svg>
</div>

<p>
  <label for="nRadius"
         style="display: inline-block; width: 240px; text-align: right">
         radius = <span id="nRadius-value">…</span>
  </label>
  <input type="range" min="0" max="101" id="nRadius">
</p>

<!--<script src="../lib/fisheye.js"></script>-->
<script src="http://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="./scripts/nv.d3.min.js"></script>
<script src="./scripts/nvd3/src/tooltip.js"></script>
<script src="./scripts/nvd3/src/utils.js"></script>
<script src="./scripts/nvd3/src/models/legend.js"></script>
<script src="./scripts/nvd3/src/models/axis.js"></script>
<script src="./scripts/nvd3/src/models/distribution.js"></script>
<script src="./scripts/nvd3/src/models/scatter.js"></script>
<script src="./scripts/nvd3/src/models/scatterChart.js"></script>
<script src="nvd3data.json" type="text/javascript"></script>
<script src="./scripts/jquery.js"></script>
<script>
//Format A
dataset.forEach(function(d){
      d.x = +d.x;
      d.y = +d.y;
      d.shape = +d.shape;
      d.size = +d.size;
    });

var chart = null;
var nRadiusMagic = 101;

nv.addGraph(function() {
   chart = nv.models.scatterChart()
                .showDistX(false)
                .showDistY(false)
                .showLegend(true)
                .color(d3.scale.category10().range())
                .tooltipContent(function(key,y,x,graph) {
                    return '<h3>' + graph.series.values[graph.pointIndex].label + '<h3>';});

  chart.xAxis.tickFormat(d3.format('.02f'));
  chart.yAxis.tickFormat(d3.format('.02f'));

d3.selectAll('.nv-point').filter(function(d){ return d.shape === 'circle' })
  .classed('hidden-point', true)


 chart.scatter.dispatch.on("elementClick", function(e) {
    url = e.series.values[e.pointIndex].url;
    //newwindow=window.open(url,'name','height=300,width=350');
    //if (window.focus) {newwindow.focus()}
    d3.select("#"+e.pointIndex).classed('hidden-point',true)
    return false;
});

 d3.select("#nRadius").on("input", function() {update(+this.value);});


  nv.utils.windowResize(chart.update);

  update(nRadiusMagic);

  return chart;
});

function clone (obj) {
    return JSON.parse(JSON.stringify(obj));
}

function update(nRadius) {

   // adjust the text on the range slider
  d3.select("#nRadius-value").text(nRadius == nRadiusMagic ? 'All' : nRadius/100);
//  d3.select("#nRadius").property("value", );

  function filterDataset(dataset, radius) {
    return dataset
        .map(function (group) {
            var gcopy = clone(group);
            gcopy.values = gcopy.values.filter(function (d) {
                console.log(d)
                return d.size < radius;
            });
            return gcopy;
        })
        .filter(function (group) {
            return group.values.length > 0;
        })
  }

  d3.select('#chart svg')
      .datum(nRadius ==  nRadiusMagic ? dataset : filterDataset(dataset, nRadius/100))
      .transition().duration(1000)
      .call(chart);
  };
</script>