Force-Directed Scatterplot

Here is an alternative method to resolve the overplotting issue faced by scatterplots: Use a force-directed layout to create jitters in the point positions.

Jittering is a common technique--along with transparency--but jittering is usually accomplished by randomly adjusting the point positions, whereas a force-directed algorithm is a simple yet principled way to avoid overplotting. As with all jittering, this comes at the cost of reduced accuracy since the position of each point is no longer an exact representation of the point's data.

Compare this with a scatterplot that has no jittering:

You can also check the "Collision detection" box to prevent points from overlapping.

This mashup combines code and ideas from several different examples by Jim Vallandingham and Mike Bostock:

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

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
  stroke-opacity: .7;
  fill-opacity: .7;
}

#controls {
  font-size: 14px;
  position: absolute;
  top: 120px;
  left: 810px;
}

input {
  margin: 4px 4px 0;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    padding = 1, // separation between nodes
    radius = 6;

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

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

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

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 controls = d3.select("body").append("label")
    .attr("id", "controls");
var checkbox = controls.append("input")
    .attr("id", "collisiondetection")
    .attr("type", "checkbox");
controls.append("span")
    .text("Collision detection");

d3.tsv("data.tsv", function(error, data) {
  var xVar = "sepalWidth",
      yVar = "sepalLength";

data.forEach(function(d) {
    d[xVar] = +d[xVar];
    d[yVar] = +d[yVar];
  });

var force = d3.layout.force()
    .nodes(data)
    .size([width, height])
    .on("tick", tick)
    .charge(-1)
    .gravity(0)
    .chargeDistance(20);

x.domain(d3.extent(data, function(d) { return d[xVar]; })).nice();
  y.domain(d3.extent(data, function(d) { return d[yVar]; })).nice();

// Set initial positions
  data.forEach(function(d) {
    d.x = x(d[xVar]);
    d.y = y(d[yVar]);
    d.color = color(d.species);
    d.radius = radius;
  });

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Sepal Width (cm)");

svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Sepal Length (cm)")

var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

d3.select("#collisiondetection").on("change", function() {
    force.resume();
  });

force.start();

function tick(e) {
    node.each(moveTowardDataPosition(e.alpha));

if (checkbox.node().checked) node.each(collide(e.alpha));

node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }

function moveTowardDataPosition(alpha) {
    return function(d) {
      d.x += (x(d[xVar]) - d.x) * 0.1 * alpha;
      d.y += (y(d[yVar]) - d.y) * 0.1 * alpha;
    };
  }

// Resolve collisions between nodes.
  function collide(alpha) {
    var quadtree = d3.geom.quadtree(data);
    return function(d) {
      var r = d.radius + radius + padding,
          nx1 = d.x - r,
          nx2 = d.x + r,
          ny1 = d.y - r,
          ny2 = d.y + r;
      quadtree.visit(function(quad, x1, y1, x2, y2) {
        if (quad.point && (quad.point !== d)) {
          var x = d.x - quad.point.x,
              y = d.y - quad.point.y,
              l = Math.sqrt(x * x + y * y),
              r = d.radius + quad.point.radius + (d.color !== quad.point.color) * padding;
          if (l < r) {
            l = (l - r) / l * alpha;
            d.x -= x *= l;
            d.y -= y *= l;
            quad.point.x += x;
            quad.point.y += y;
          }
        }
        return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
      });
    };
  }

});

</script>

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

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