JSFiddle - React, Tailwind, and code Playground

by Egor Makarenko

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="chart" style="width:700px;height:450px;"></div>

JavaScript

(function() {

  d3.labeler = function() {
    var lab = [],
      anc = [],
      w = 1, // box width
      h = 1, // box width
      labeler = {};

    var max_move = 5.0,
      max_angle = 10.5,
      acc = 0,
      rej = 0;

    // weights
    var w_len = 100.0, // leader line length
      w_inter = 1.0, // leader line intersection
      w_lab2 = 30.0, // label-label overlap
      w_lab_anc = 30.0, // label-anchor overlap
      w_overlap_graph_bounds = 50.0, // label-svg bounds overlap
      w_orient = 0.0; // orientation bias

    // booleans for user defined functions
    var user_energy = false,
      user_schedule = false;

    var user_defined_energy,
      user_defined_schedule;

    var force_bounds = false;

    energy = function(index) {
      // energy function, tailored for label placement

      var m = lab.length,
        ener = 0,
        dx = lab[index].x - anc[index].x,
        dy = anc[index].y - lab[index].y,
        dist = Math.sqrt(dx * dx + dy * dy),
        overlap = true,
        amount = 0
      theta = 0;

      // penalty for length of leader line
      if (dist > 0) ener += dist * w_len;

      // label orientation bias
      dx /= dist;
      dy /= dist;
      if (dx > 0 && dy > 0) {
        ener += 0 * w_orient;
      } else if (dx < 0 && dy > 0) {
        ener += 1 * w_orient;
      } else if (dx < 0 && dy < 0) {
        ener += 2 * w_orient;
      } else {
        ener += 3 * w_orient;
      }

      var x21 = lab[index].x,
        y21 = lab[index].y - lab[index].height + 2.0,
        x22 = lab[index].x + lab[index].width,
        y22 = lab[index].y + 2.0;
      var x11, x12, y11, y12, x_overlap, y_overlap, overlap_area;

      for (var i = 0; i < m; i++) {
        if (i != index) {

          // penalty for intersection of leader lines
          overlap = intersect(anc[index].x, lab[index].x, anc[i].x, lab[i].x,
            anc[index].y, lab[index].y, anc[i].y, lab[i].y);
          if (overlap) ener += w_inter;

          //...