d3-beeswarm plugin

This block uses the d3-beeswarm plugin I made (see the Github project). This plugin produces a beeswarm arrangement, thanks to a dedicated algorithm and without the use a the d3.force layout.

Beeswarm is a one-dimensional scatter plot with closely-packed, non-overlapping points. The beeswarm plot is a useful technique when we wish to see not only the measured values of interest for each data point, but also the distribution of these values

Some beeswarm-like plot implementation uses force layout, but the force layout simulation has some drawbacks:

it naturally tries to reach its equilibrium by rearranging data points in the 2D space, which can be disruptive to the ordering of the data
it requires several iterations to reach its equilibrium

This beeswarm plugin uses a dedicated one pass algorithm. By default, the plugin arranges data in an horizontal way. In this case, the final arrangement is contraint in x and free in y. This means that data are arranged along the x-axis, and that the position of each data reflects its precise x value. y position doesn't reflect any data-related value, and only serves the non-overlapping constraint. This plugin can also arrange data in a vertical way.

Even if this block works fine, the plugin is an on-going work. See the Github project's issues for possible enhancements.

Usages

var swarm = d3.beeswarm()
  .data(data)                                 // set the data to arrange
  .distributeOn(function(d){                  // set the value accessor to distribute on
       return xScale(d.trend);                  // evaluated once on each element of data
   })                                           // when starting the arrangement
  .radius(4)                                  // set the radius for overlapping detection
  .orientation("horizontal")                  // set the orientation of the arrangement
                                                // could also be 'vertical'
  .side("symetric")                           // set side(s) available for accumulation;
                                                // could also be 'positive' or 'negative'
  .arrange();                                 // launch arrangement computation;
                                                // return an array of {datum: , x: , y: }
                                                // where datum refers to an element of data
                                                // each element of data remains unchanged

Then, later in your code, in order to draw the swarm:

d3.selectAll("circle")
  .data(swarm)
  .enter()
    .append("circle")
      .attr("cx", function(bee) { return bee.x; })
      .attr("cy", function(bee) { return bee.y; })
      .attr("r", 4)
      .style("fill", function(bee) { return fill(bee.datum.rank); })

In the last line, bee.datum refers to the original datum.

Acknowledgments to:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  
  #under-construction {
    display: none;
    position: absolute;
    top: 200px;
    left: 300px;
    font-size: 40px;
  }

circle {
    stroke-width: 1.5px;
  }

line {
    stroke: lightGrey;
  }

</style>
<body>
  <div id="under-construction">
    UNDER CONSTRUCTION
  </div>
	<script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://raw.githack.com/dataarts/dat.gui/master/build/dat.gui.min.js">
  </script>
  <script src="https://raw.githack.com/kcnarf/d3-beeswarm/master/build/d3-beeswarm.js"></script>
  
  <script>
    var width = 960,
        height = 500;
    var maxRadius = 20,
    		maxHeight = height/2-maxRadius;
    var csvData = []; // data retrieve from CSV
    var memorizedSortedData = []; // allow to maintain sort when changing radius
    var arrangementMax = -Infinity; // allow to detect extremes accumulations
    var beeswarmArrangement = []; // allow to manage extreme accumulations wihtout executing Beeswarm arrangement
    var showMetrics = false;
    
    
    var availableSortings = ["shuffled", "minToMax", "maxToMin", "fromExtremes"];
    var availableOrientations = ["horizontal", "vertical"];
    var availableSides = ["symetric", "positive", "negative"];
    var availableExtremesManagementStrategies = ["none"/*, "omit"*/, "wrap", "modulo", "linear stretch", "log stretch"];
    
		var ctrls, config = {
      manyPoints: false,
      sorting: "maxToMin",
      reshuffle: function() {
        if (config.sorting === "shuffled") {
          renewData();
          drawBeeswarm();
        }
      },
      radius: 4,
      orientation: "horizontal",
      side: "symetric",
      strategy: "none"
    };
    insertControls();
    
    var fill = d3.scale.linear().domain([1,150]).range(['lightgreen', 'pink']);
    
    var xScale = function (x) { return width/2 + 6000*x; };
    var yScale = function (x) { return height/2 - 3500*x; };

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

// return freeCoord - Math.sign(freeCoord)*(arrangementMax-maxHeight)*Math.pow(freeCoord/arrangementMax,2);
        // return Math.sign(freeCoord)*maxHeight*(Math.pow(Math.abs(freeCoord)/arrangementMax,0.5));
        return maxHeight*Math.sign(freeCoord)*Math.log((Math.E-1)*Math.abs(freeCoord)/arrangementMax+1);
      }
    }
    
    function showCircles () {
      nodeContainer.selectAll("circle").remove();
      var node = nodeContainer.selectAll("circle")
          .data(beeswarmArrangement)
        .enter().append("circle")
          .attr("r", config.radius-0.75)
          .attr("cx", function(bee) {
            if (config.orientation === "horizontal") {
              return bee.x;
            } else {
            	return width/2 + manageExtremeAccumulation(bee);
            }
          })
          .attr("cy", function(bee) {
            if (config.orientation === "vertical") {
              return bee.y;
            } else {
            	return height/2 + manageExtremeAccumulation(bee);
            }
          })
          .style("fill", function(d) { return fill(d.datum.rank); })
          .style("stroke", function(d) { return d3.rgb(fill(d.datum.rank)).darker(); })
          .on("mouseenter", function(d) {
            stem.text(d.datum.stem);
            rank.text(d.datum.rank);
            value.text(d.datum.trend);
            tooltip.transition().duration(0).style("opacity", 1); // remove fade out transition on mouseleave
          })
          .on("mouseleave", function(d) {
            tooltip.transition().duration(1000).style("opacity", 0);
          });
    };
    
    function drawBeeswarm() {
      var data = copyData(memorizedSortedData);
      
      var startTime = Date.now();
      var swarm = d3.beeswarm()
      	.data(data)
      	.radius(config.radius)
      	.orientation(config.orientation)
      	.side(config.side)
      	.distributeOn(function(d) {
          if (config.orientation === "horizontal") {
            return xScale(d.trend);
          } else {
            return yScale(d.trend);
          }
        })
      beeswarmArrangement =	swarm.arrange();
      if (showMetrics) {
	      updateMetrics((Date.now()-startTime), data.length, swarm.metrics());
      }
      
      computeArrangementMax();
      showOrHideExtremeAccumulationCtrl();
      showAxis();
      showCircles();
    };
		
    d3.csv("data.csv", dottype, function(error, data) {
      if (error) throw error;
      renewData();
      drawBeeswarm();
    });
    
    ////////////////////////
    // bl.ocks' utilities //
    ////////////////////////
    
    function dottype(d) {
      d.id = d.stem;
      d.stem = d.stem;
      d.rank = +d.rank;
      d.trend = +d.trend;
      csvData.push(d);
      return d;
    };
    
    function copyData(data) {
      return data.map(function(d) {
          return {
            id: d.id,
            stem: d.stem,
            rank: d.rank,
            trend: d.trend
          }
         });
    };

Updated missing url https://raw.githack.com/Kcnarf/d3-beeswarm/master/build/d3-beeswarm.js to https://raw.githack.com/kcnarf/d3-beeswarm/master/build/d3-beeswarm.js

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

https://raw.githack.com/dataarts/dat.gui/master/build/dat.gui.min.js

https://raw.githack.com/Kcnarf/d3-beeswarm/master/build/d3-beeswarm.js