On the impossibility of focusing. by fogonwater

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
#chart {
  text-align: center;
}
</style>
<div id="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script>

var margin = {top: 0, right: 0, bottom: 0, left: 0},
    width = 960 - margin.left - margin.right,
    height = 520 - margin.top - margin.bottom;

var randomX = d3.random.normal(width / 2, 80),
    randomY = d3.random.normal(height / 2, 80);

var data = [],
    rx,
    ry,
    xlim1 = width / 2 - 70,
    xlim2 = width / 2 + 70,
    ylim1 = height / 2 - 70,
    ylim2 = height / 2 + 70;

while (data.length < 50000) {
    rx = randomX();
    ry = randomY();
    if (xlim1 < rx && rx < xlim2 && ylim1 < ry && ry < ylim2) {
      continue;
    }
    data.push([rx, ry]);
}

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

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

var svg = d3.select("#chart").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 + ")");

svg.selectAll("circle")
    .data(data)
  .enter().append("circle")
    .attr("cx", function(d) {return d[0];})
    .attr("cy", function(d) {return d[1];})
    .attr("r", .7)
    .attr("opacity", 0.6)
    .attr("fill", '#222');

</script>