Scatter 4 BC

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

forked from adamjanes's block: Scatter 4

<!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://cdn.jsdelivr.net/npm/d3@5.5.0/dist/d3.min.js" type="text/javascript"></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 = 200;
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 update() {

}

function ticked() {
  //console.log(d.x);
  circle
    .attr("cx", function(d) { return d.x} )
    .attr("cy", function(d) { return d.y} );
  console.log("Ticking...");
}
  
var circle = null;

// Deliberately clashing data points
var nodes = d3.range(nodesNum).map(d=> {
  return {
    gender: Math.random() > 0.5,
    age: 200,
    score: 150
  }
})
  
update();

</script>

https://cdn.jsdelivr.net/npm/d3@5.5.0/dist/d3.min.js

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