Dot Remove

<!DOCTYPE html>

<body>

var margin = {top: 20, right: 10, bottom: 20, left: 40 };

var width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

var svg = d3.select('body').append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
      .append('g')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

var xScale = d3.scale.linear()
      .range([0, width])
      .domain([1,10]);

var yScale = d3.scale.linear()
       .range([0, height]);

var xAxis = d3.svg.axis()
        .orient('bottom')
        .scale(xScale);

var yAxis = d3.svg.axis()
        .orient('left')
        .scale(yScale);

//layers
    var xAxisLayer = svg.append('g')
        .attr('class', 'x-axis-layer')
        .attr('transform', 'translate(0,' + height + ')');

var yAxisLayer = svg.append('g')
        .attr('class', 'y-axis-layer');

var dotLayer= svg.append('g')
        .attr('class', 'dot-layer');

var draw = function () {
      yScale.domain([d3.max(data, function(d) { return d.y; }), 0]);
      yAxis.scale(yScale);
  
      xAxis(xAxisLayer);
      yAxisLayer.transition().call(yAxis);

var dots = dotLayer.selectAll('.dot').data(data);

dots.enter()
        .append('circle')
        .attr('class', 'dot')
        .attr('r', 5)
        .on('click', function(d) {
          var index = data.indexOf(d);
          data.splice(index, 1);
          draw();
        })
        ;

dots
        .attr('cx', function(d) { return xScale(d.x); })
        .attr('cy', function(d) { return yScale(d.y); });

dots.exit().remove();

};

draw();
  </script>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js