D3 Examples - Scatter 2

xxxxxxxxxx
 
<!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;
​
var x = d3.scaleLinear()
  .domain( [0, 4] )
  .range( [margin.left, width + margin.right ] );
​
var xAxis = d3.axisBottom(x);
​
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(100).map(d => {
  return {
    gender: Math.random() > 0.5,
    age: (Math.random() * 5).toFixed(0),
    score: x((Math.random() * 5).toFixed(0))
  }
})
​
  var simulation = d3.forceSimulation()
    .force("y", d3.forceY(d => {
      var val = d.gender ? 180 : 320;
      return val
    }))
    .force("x", d3.forceX(d => Math.min(Math.max(d.score, margin.left), width)))
    .force("collide", d3.forceCollide().radius(8));
  
  var circle = svg.selectAll("circle")
    .data(nodes)
  .enter().append("circle")
    .style("fill", d => {
      var col = d.gender ? "cornflowerblue" : "red"
      return col
    })
    .attr("cx", d => { console.log(d); return d.score} )
    .attr("cy", 0 )
    .attr("r", function(d) { return 7} )
    .style("opacity", 0.6);  
  
  simulation
    .nodes(nodes)
    .on("tick", ticked)
  
  console.log(nodes)
​
  function ticked() {
    circle
      .attr("cx", function(d) { return d.x} )
      .attr("cy", function(d) { return d.y}  )
  }
​
</script>
    
Scatter 2

Scatter plot

using force layout and collision to prevent points overlapping
