Scatter plot with collision

Scatter plot

using force layout and collision to prevent points overlapping

Solving a problem of overlapping data points with correct positioning on the x-axis

<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
  font: 20px sans-serif;
}

p {
  margin: 6px 2px;
}

.axisTitle {
  font: bold 12px sans-serif ;
}

.x.axis .domain {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  font: 14px sans-serif;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<script>

var margin = {top: 50, right: 50, bottom: 50, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,

padding = 2,
    maxRadius = 30,
    minRadius = 2,
    numberOfNodes = 144;

var x = d3.scaleLinear()
  .domain( [0, 50] )
  .range( [margin.left, width + margin.right ] );

var xAxis = d3.axisBottom(x);

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-6, 0])
  .html(function(d) {
    return "<p><strong>Age:</strong> <span>" + d.value + "</span></p>\
    <p><strong>People:</strong> <span>" + d.size + "</span></p>";
  });

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .attr("shape-rendering", "geometric-precision");

svg.call(tip);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + ( margin.top + ( height/2) ) + ")")
  .call(xAxis);

var xAxisTitle = svg.append("text")
  .attr("class", "axisTitle")
  .text("Age in case file")

xAxisTitle
  .attr("x", width - xAxisTitle.node().getBBox().width + margin.right)
  .attr("y", margin.top + ( height/2) - xAxisTitle.node().getBBox().height);

svg.append("text")
  .attr("x", 50)
  .attr("y", 30)
  .attr("dy", "0.71em")
  .text("People hanging out in groups");

d3.json("data.json", function(error, data) {
  if (error) throw error;

var nodes = data.map(function(node, index) {
    return {
      index: index,
      value: node.value,
      size: node.size,
      x: x(node.value),
      fx: x(node.value),
    };
  });

var sizeScale = d3.scaleLinear()
  .domain([d3.min(data, function(d){ return d.size;}), d3.max(data,  function(d){ return d.size;})])
  .range([minRadius,maxRadius]);

var colorScale = d3.scaleSequential(d3.interpolateRainbow)
  .domain( [d3.min(data, function(d){ return d.value;}), d3.max(data,  function(d){ return d.value;})] );

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + ( margin.top + ( height/2) ) + ")")
    .call(xAxis);

var simulation = d3.forceSimulation(nodes)
    .force("y", d3.forceY(250))
    .force("collide", d3.forceCollide().radius(function(d){ return sizeScale(d.size) + padding }))
    .force("manyBody", d3.forceManyBody().strength(-10))
    .stop();

for (var i = 0; i < 150; ++i) simulation.tick();

var circle = svg.selectAll("circle")
    .data(nodes)
    .enter().append("circle")
    .style("fill", function(d) { return colorScale(d.value); })
    .attr("cx", function(d) { return d.x} )
    .attr("cy", function(d) { return d.y} )
    .attr("r", function(d) { return sizeScale(d.size)} )
    .style("opacity", 0.6)
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide)
});
</script>

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

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

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js