noob d3

This is just an exercise to implement grouping of curves according to the values of one of several possible "factors". In this example the factors are chosen only because they correspond to well-known n-somes, for n ∈ {2, 3, 4, 5}.

I've refactored this code many times, trying to make the code readable, but I think I've failed miserably in this regard, especially with the d3.js stuff. I think I just don't get d3.js... Comments welcome!

<!DOCTYPE html>
<meta charset="utf-8">
<title>noob d3</title>
<style>
button{display:inline}
#grid{background:#fff;border-collapse:collapse;}
#grid td{border-style:solid;border-color:#eee;}
#grid svg{display:block;}
#grid path{fill:none;}
#caption{margin-bottom: 5px;}
</style>

<div id="caption" style="visibility: hidden">
      <button>Cycle</button>
      Curves grouped by the value of the "<span id="mode-label"></span>" factor;
      (source: "<span id="input-file">loremipsum.tsv</span>")
    </div>

d3.tsv(d3.select('#input-file').node().textContent, function(error, data) {

var XRANGE = [0, 2*Math.PI],
      PLOT_RANGE_PADDING = 0.02;

var params = 'phi A omega'.split(' '),
      pgetters = params.map(get),
      params_set = d3.set(params),
      factors = d3.keys(data[0]).filter(function (d) {
                  return !params_set.has(d)
                }),
      fgetters = factors.map(get),
      grid = build_grid(d3.max(factors.map(function (f) {
               return levels(data, f).length;
             }))),
      get_class = mk_get_class(),
      get_xy = mk_get_xy();

var domains = d3.transpose(paths.data().map(d3.transpose))
                  .map(function (a) {
                     return pad_interval(d3.extent(d3.merge(a)),
                                         PLOT_RANGE_PADDING);
                   }),
      svg = grid.select('svg'),
      text_height = svg.select('text').node().getBBox().height,
      ranges = [[0, parseInt(svg.attr('width'))],
                [parseInt(svg.attr('height')), text_height]],
      line = linedrawer(domains, ranges);
      
  paths.attr('d', function(d){ return line(d) });

classes.map(function (c, i) {
    grid.selectAll('.' + c)
        .each(function (_, j) {
           var hsl = d3.hsl(mult*(i + ((start + j * step) % 1)), 0.6, 0.6);
           d3.select(this).style('stroke', hsl);
        })
  });

// instrument button

var nfactors = factors.length,
      pick = -1;

$('button').click(function() {
    var factor = factors[pick = (pick + 1) % nfactors],
        lvls = levels(data, factor),
        nlevels = lvls.length,
        sels = lvls.map(function (lvl) { return '.' + get_class(factor, lvl) });

grid.selectAll('g')
        .each(function (_, i) {
           var g = this, label = '';
           if (i < nlevels) {
             label = factor + ': "' + lvls[i] + '"';
             grid.selectAll(sels[i])
                 .each(function(){ g.appendChild(this) });
           }
           d3.select(g).select('text').text(label);
         });

$('#mode-label').text(factor);

}).click();

$("#caption").css('visibility', 'visible');
});

function get (key) {
  return function (d) { return d[key]; }
}

function proj (aoo, key) {
  return aoo.map(get(key));
}

function levels (data, factor) {
  return d3.set(proj(data, factor)).values();
}

function build_grid (nvps) {
  var WIDTH = 950,
      SHAPE = {width: 250, height: 150},
      BORDER_WIDTH = 10,
      PADDING = 20;

var row,
      table = d3.select('#grid'),
      i = 0,
      available_width = WIDTH - BORDER_WIDTH,
      width_per_cell = SHAPE.width + 2 * PADDING + BORDER_WIDTH,
      ncols = Math.floor(available_width/width_per_cell),
      label,
      box;

while (i < nvps) {
    if (i % ncols == 0) { row = table.append('tr') }
    label = row.append('td')
       .style({'border-width': BORDER_WIDTH + 'px',
               padding: PADDING + 'px'})
     .append('svg')
       .attr(SHAPE)
     .append('g')
     .append('text').text('placeholder');
    box = label.node().getBBox();
    label.attr({x: 0, y: box.height - 5});
    i += 1;
  }

return table;
}

function mk_get_class () {
  var memo = d3.map(),
      sep = String.fromCharCode(29),
      prefix = '_',
      next = -1;
  return function (factor, level) {
    var key = factor + sep + level;
    return   memo.has(key)
           ? memo.get(key)
           : memo.set(key, prefix + (next += 1));
  }
}

function apply (d) {
  return function (g) { return g(d); };
}

function mk_fn(phi, A, omega) {
  return function (x) { return A * Math.sin(omega * (x - phi)); }
}

function mk_get_xy() {
  var NPTS = 200,
      mesh = d3.range(NPTS),
      scale = d3.scale
                .linear()
                .domain([0, NPTS - 1]);

return function (fn, xrange) {
    var xs = mesh.map(scale.range(xrange));
    return d3.zip(xs, xs.map(fn));
  }
}

function pad_interval(interval, padding) {
  return [interpolate(interval, -padding),
          interpolate(interval, 1 + padding)];
}

function interpolate(interval, t) {
  return interval[0] * (1 - t) + interval[1] * t;
}

</script>

https://code.jquery.com/jquery-1.10.2.min.js

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