Scatter 4

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

forked from stain-win's block: Scatter 1

forked from adamjanes's block: Scatter 1

forked from adamjanes's block: Scatter 2

forked from adamjanes's block: Scatter 3

<!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 = 800 - margin.top - margin.bottom;

var nodesNum = 100;
var xBands = 5;
var yBands = 4;
  
// Agreement
var x = d3.scaleLinear()
  .domain( [0, (xBands - 1)] )
  .range( [margin.left, width + margin.right ] );

// Age
var y = d3.scaleLinear()
  .domain( [0, (yBands - 1)] )
  .range( [height + margin.bottom, margin.top ] );
 
  
  
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");

// Sample data
var nodes = d3.range(nodesNum).map(d => {
  return {
    gender: Math.random() > 0.5,
    age: y((Math.random() * (yBands - 1)).toFixed(0)),
    score: x((Math.random() * (xBands - 1)).toFixed(0))
  }
})

function ticked() {
    circle
      .attr("cx", function(d) { return d.x} )
      .attr("cy", function(d) { return d.y}  )
  }

</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