ForceLayout - maintain x-position of nodes

This block experiments a way to vizualise the distribution of things (whatever it is) in a horizontal way (ie. along the x-axis), where constraints/objectives are:

to maintain the exact position of each datum (represented by a circle) along the x-axis
to be able to hover each circle to show related datum

This block uses the d3's Force Layout to achieve these objectives. I re-use the technics illustrated in mbostock's block in and later by bjtucker's block, in order to constrain each circle's x-position while allowing vertical accumulation/aggregation of circles.

Acknowledgments to:

D3.js (v3.5.5)
blockbuilder.org
dat.gui
mbostock's block: Bounded Force Layout
bjtucker's block: Bounded Force Layout - force rank by group

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

circle {
  stroke-width: 1.5px;
}

line {
  stroke: #999;
}

</style>
<body>
	<script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
	<script>
    var width = 960,
        height = 500,
        radius = 4,
        csvData = [],
        config = {
          manyPoints: false
        };

insertControls();

var fill = d3.scale.linear().domain([1,150]).range(['lightgreen', 'pink']);

var force = d3.layout.force()		
      .gravity(0.2) //higher value mean higher attraction to the center of the force layout; can be replace with 'chargeDistance' (cf. below)		
      .charge(-(radius*radius-radius)) //higher positive/negative value means higher attraction/repulsion of each circle		
      //.chargeDistance(radius) //can be used instead of 'gravity' in order to maintain nodes grouped; if not set, chargeDistance is infinite, leading to escaping nodes if there is no gravity and/or friction; but does not re-group escaping nodes, as 'gravity' does		
      .size([width, height])		
      .friction(0.7) //higher positive value means easier repositionning

var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

svg.append("line")
      .attr("x1", 0)
      .attr("y1", height/2)
      .attr("x2", width)
      .attr("y2", height/2)
      .style("stroke", "lightgrey");

var tooltip = svg.append("g")
      .attr("transform", "translate("+[width/2, 50]+")")
      .style("opacity", 0);
    var titles = tooltip.append("g").attr("transform", "translate("+[-5,0]+")")
    titles.append("text").attr("text-anchor", "end").text("stem(fr):");
    titles.append("text")
      .attr("text-anchor", "end")
      .attr("transform", "translate("+[0,15]+")")
      .text("rank:");
    titles.append("text")
      .attr("text-anchor", "end")
      .attr("transform", "translate("+[0,30]+")")
      .text("x-value:");
    var values = tooltip.append("g").attr("transform", "translate("+[5,0]+")")
    var stem = values.append("text");
    stem.attr("text-anchor", "start");
    var rank = values.append("text");
    rank.attr("text-anchor", "start")
      .attr("transform", "translate("+[0,15]+")");
    var value = values.append("text");
    value.attr("text-anchor", "start")
      .attr("transform", "translate("+[0,30]+")");

function dottype(d) {
      d.stem = d.stem;
      d.rank = +d.rank;
      d.trend = +d.trend;
      d.originalX = width/2+d.trend*6000;
      d.x = d.originalX;
      d.y = height/2;
      csvData.push(d);
      return d;
    }

d3.csv("data.csv", dottype, function(error, foo) {
      if (error) throw error;

draw();
    });

force.nodes(data)
          .on("tick", tick)
          .stop()
        	.start();

function tick() {
        node.each(function(d){d.x = d.originalX; }) //constrains/fixes x-position

node.attr("cx", function(d) {return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
            .attr("cy", function(d) {return d.y = Math.max(radius, Math.min(height - radius, d.y)); });
      }
    };
    
    function copyData(data) {
      return data.map(function(d) {
        return {
          id: d.id,
          stem: d.stem,
          rank: d.rank,
          trend: d.trend,
          originalX: d.originalX,
          x: d.originalX,
          y: d.y
        }
      });
    };

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

https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js