@jrkasprzyk/parcoord-es 3.0.0

package/src/state/sideEffects.js

@@ -0,0 +1,89 @@
+// side effects for setters
+import { dispatch } from 'd3-dispatch';
+import computeClusterCentroids from '../util/computeClusterCentroids';
+import flipAxisAndUpdatePCP from '../util/flipAxisAndUpdatePCP';
+
+const without = (arr, items) => {
+  items.forEach(el => {
+    delete arr[el];
+  });
+  return arr;
+};
+
+const sideEffects = (
+  config,
+  ctx,
+  pc,
+  xscale,
+  axis,
+  flags,
+  brushedQueue,
+  markedQueue,
+  foregroundQueue
+) =>
+  dispatch
+    .apply(this, Object.keys(config))
+    .on('composite', d => {
+      ctx.foreground.globalCompositeOperation = d.value;
+      ctx.brushed.globalCompositeOperation = d.value;
+    })
+    .on('alpha', d => {
+      ctx.foreground.globalAlpha = d.value;
+      ctx.brushed.globalAlpha = d.value;
+    })
+    .on('brushedColor', d => {
+      ctx.brushed.strokeStyle = d.value;
+    })
+    .on('width', d => pc.resize())
+    .on('height', d => pc.resize())
+    .on('margin', d => pc.resize())
+    .on('rate', d => {
+      brushedQueue.rate(d.value);
+      markedQueue.rate(d.value);
+      foregroundQueue.rate(d.value);
+    })
+    .on('dimensions', d => {
+      config.dimensions = pc.applyDimensionDefaults(Object.keys(d.value));
+      xscale.domain(pc.getOrderedDimensionKeys());
+      pc.sortDimensions();
+      if (flags.interactive) {
+        pc.render().updateAxes();
+      }
+    })
+    .on('bundleDimension', d => {
+      if (!Object.keys(config.dimensions).length) pc.detectDimensions();
+      pc.autoscale();
+      if (typeof d.value === 'number') {
+        if (d.value < Object.keys(config.dimensions).length) {
+          config.bundleDimension = config.dimensions[d.value];
+        } else if (d.value < config.hideAxis.length) {
+          config.bundleDimension = config.hideAxis[d.value];
+        }
+      } else {
+        config.bundleDimension = d.value;
+      }
+
+      config.clusterCentroids = computeClusterCentroids(
+        config,
+        config.bundleDimension
+      );
+      if (flags.interactive) {
+        pc.render();
+      }
+    })
+    .on('hideAxis', d => {
+      pc.brushReset();
+      pc.dimensions(pc.applyDimensionDefaults());
+      pc.dimensions(without(config.dimensions, d.value));
+      pc.render();
+    })
+    .on('flipAxes', d => {
+      if (d.value && d.value.length) {
+        d.value.forEach(function(dimension) {
+          flipAxisAndUpdatePCP(config, pc, axis)(dimension);
+        });
+        pc.updateAxes(0);
+      }
+    });
+
+export default sideEffects;

package/src/util/colorPath.js

@@ -0,0 +1,71 @@
+// draw single cubic bezier curve
+import computeCentroids from './computeCentroids';
+import computeControlPoints from './computeControlPoints';
+import h from './height';
+
+const singleCurve = (config, position, d, ctx) => {
+  const centroids = computeCentroids(config, position, d);
+  const cps = computeControlPoints(config.smoothness, centroids);
+
+  ctx.moveTo(cps[0].e(1), cps[0].e(2));
+
+  for (let i = 1; i < cps.length; i += 3) {
+    if (config.showControlPoints) {
+      for (let j = 0; j < 3; j++) {
+        ctx.fillRect(cps[i + j].e(1), cps[i + j].e(2), 2, 2);
+      }
+    }
+    ctx.bezierCurveTo(
+      cps[i].e(1),
+      cps[i].e(2),
+      cps[i + 1].e(1),
+      cps[i + 1].e(2),
+      cps[i + 2].e(1),
+      cps[i + 2].e(2)
+    );
+  }
+};
+
+// returns the y-position just beyond the separating null value line
+const getNullPosition = config => {
+  if (config.nullValueSeparator === 'bottom') {
+    return h(config) + 1;
+  } else if (config.nullValueSeparator === 'top') {
+    return 1;
+  } else {
+    console.log(
+      "A value is NULL, but nullValueSeparator is not set; set it to 'bottom' or 'top'."
+    );
+  }
+  return h(config) + 1;
+};
+
+const singlePath = (config, position, d, ctx) => {
+  Object.keys(config.dimensions)
+    .map(p => [
+      position(p),
+      d[p] === undefined
+        ? getNullPosition(config)
+        : config.dimensions[p].yscale(d[p]),
+    ])
+    .sort((a, b) => a[0] - b[0])
+    .forEach((p, i) => {
+      i === 0 ? ctx.moveTo(p[0], p[1]) : ctx.lineTo(p[0], p[1]);
+    });
+};
+
+// draw single polyline
+const colorPath = (config, position, d, ctx) => {
+  ctx.beginPath();
+  if (
+    (config.bundleDimension !== null && config.bundlingStrength > 0) ||
+    config.smoothness > 0
+  ) {
+    singleCurve(config, position, d, ctx);
+  } else {
+    singlePath(config, position, d, ctx);
+  }
+  ctx.stroke();
+};
+
+export default colorPath;

package/src/util/computeCentroids.js

@@ -0,0 +1,44 @@
+import { Vector } from 'sylvester-es6/src/Vector';
+
+const computeCentroids = (config, position, row) => {
+  const centroids = [];
+
+  const p = Object.keys(config.dimensions);
+  const cols = p.length;
+  const a = 0.5; // center between axes
+  for (let i = 0; i < cols; ++i) {
+    // centroids on 'real' axes
+    const x = position(p[i]);
+    const y = config.dimensions[p[i]].yscale(row[p[i]]);
+    centroids.push(new Vector([x, y]));
+
+    // centroids on 'virtual' axes
+    if (i < cols - 1) {
+      const cx = x + a * (position(p[i + 1]) - x);
+      let cy = y + a * (config.dimensions[p[i + 1]].yscale(row[p[i + 1]]) - y);
+      if (config.bundleDimension !== null) {
+        const leftCentroid = config.clusterCentroids
+          .get(
+            config.dimensions[config.bundleDimension].yscale(
+              row[config.bundleDimension]
+            )
+          )
+          .get(p[i]);
+        const rightCentroid = config.clusterCentroids
+          .get(
+            config.dimensions[config.bundleDimension].yscale(
+              row[config.bundleDimension]
+            )
+          )
+          .get(p[i + 1]);
+        let centroid = 0.5 * (leftCentroid + rightCentroid);
+        cy = centroid + (1 - config.bundlingStrength) * (cy - centroid);
+      }
+      centroids.push(new Vector([cx, cy]));
+    }
+  }
+
+  return centroids;
+};
+
+export default computeCentroids;

package/src/util/computeClusterCentroids.js

@@ -0,0 +1,33 @@
+const computeClusterCentroids = (config, d) => {
+  const clusterCentroids = new Map();
+  const clusterCounts = new Map();
+  // determine clusterCounts
+  config.data.forEach(function(row) {
+    let scaled = config.dimensions[d].yscale(row[d]);
+    if (!clusterCounts.has(scaled)) {
+      clusterCounts.set(scaled, 0);
+    }
+    let count = clusterCounts.get(scaled);
+    clusterCounts.set(scaled, count + 1);
+  });
+
+  config.data.forEach(function(row) {
+    Object.keys(config.dimensions).map(p => {
+      let scaled = config.dimensions[d].yscale(row[d]);
+      if (!clusterCentroids.has(scaled)) {
+        const _map = new Map();
+        clusterCentroids.set(scaled, _map);
+      }
+      if (!clusterCentroids.get(scaled).has(p)) {
+        clusterCentroids.get(scaled).set(p, 0);
+      }
+      let value = clusterCentroids.get(scaled).get(p);
+      value += config.dimensions[p].yscale(row[p]) / clusterCounts.get(scaled);
+      clusterCentroids.get(scaled).set(p, value);
+    });
+  });
+
+  return clusterCentroids;
+};
+
+export default computeClusterCentroids;

package/src/util/computeControlPoints.js

@@ -0,0 +1,38 @@
+import { Vector } from 'sylvester-es6/src/Vector';
+
+const computeControlPoints = (smoothness, centroids) => {
+  const cols = centroids.length;
+  const a = smoothness;
+  const cps = [];
+
+  cps.push(centroids[0]);
+  cps.push(
+    new Vector([
+      centroids[0].e(1) + a * 2 * (centroids[1].e(1) - centroids[0].e(1)),
+      centroids[0].e(2),
+    ])
+  );
+  for (let col = 1; col < cols - 1; ++col) {
+    let mid = centroids[col];
+    let left = centroids[col - 1];
+    let right = centroids[col + 1];
+
+    let diff = left.subtract(right);
+    cps.push(mid.add(diff.x(a)));
+    cps.push(mid);
+    cps.push(mid.subtract(diff.x(a)));
+  }
+
+  cps.push(
+    new Vector([
+      centroids[cols - 1].e(1) +
+        a * 2 * (centroids[cols - 2].e(1) - centroids[cols - 1].e(1)),
+      centroids[cols - 1].e(2),
+    ])
+  );
+  cps.push(centroids[cols - 1]);
+
+  return cps;
+};
+
+export default computeControlPoints;

package/src/util/dimensionLabels.js

@@ -0,0 +1,11 @@
+/**
+ * dimension display names
+ *
+ * @param config
+ * @param d
+ * @returns {*}
+ */
+const dimensionLabels = config => d =>
+  config.dimensions[d].title ? config.dimensions[d].title : d;
+
+export default dimensionLabels;

package/src/util/flipAxisAndUpdatePCP.js

@@ -0,0 +1,19 @@
+import { select, selectAll } from 'd3-selection';
+
+const flipAxisAndUpdatePCP = (config, pc, axis) =>
+  function(dimension) {
+    pc.flip(dimension);
+    pc.brushReset(dimension);
+
+    // select(this.parentElement)
+    pc.selection
+      .select('svg')
+      .selectAll('g.axis')
+      .filter(d => d === dimension)
+      .transition()
+      .duration(config.animationTime)
+      .call(axis.scale(config.dimensions[dimension].yscale));
+    pc.render();
+  };
+
+export default flipAxisAndUpdatePCP;

package/src/util/functor.js

@@ -0,0 +1,3 @@
+const _functor = v => (typeof v === 'function' ? v : () => v);
+
+export default _functor;

package/src/util/getRange.js

@@ -0,0 +1,24 @@
+/** adjusts an axis' default range [h()+1, 1] if a NullValueSeparator is set */
+const getRange = config => {
+  const h = config.height - config.margin.top - config.margin.bottom;
+
+  if (config.nullValueSeparator == 'bottom') {
+    return [
+      h +
+        1 -
+        config.nullValueSeparatorPadding.bottom -
+        config.nullValueSeparatorPadding.top,
+      1,
+    ];
+  } else if (config.nullValueSeparator == 'top') {
+    return [
+      h + 1,
+      1 +
+        config.nullValueSeparatorPadding.bottom +
+        config.nullValueSeparatorPadding.top,
+    ];
+  }
+  return [h + 1, 1];
+};
+
+export default getRange;

package/src/util/getset.js

@@ -0,0 +1,23 @@
+const getset = (obj, state, events, side_effects) => {
+  Object.keys(state).forEach(function(key) {
+    obj[key] = function(x) {
+      if (!arguments.length) {
+        return state[key];
+      }
+      if (
+        key === 'dimensions' &&
+        Object.prototype.toString.call(x) === '[object Array]'
+      ) {
+        console.warn('pc.dimensions([]) is deprecated, use pc.dimensions({})');
+        x = obj.applyDimensionDefaults(x);
+      }
+      let old = state[key];
+      state[key] = x;
+      side_effects.call(key, obj, { value: x, previous: old });
+      events.call(key, obj, { value: x, previous: old });
+      return obj;
+    };
+  });
+};
+
+export default getset;

package/src/util/height.js

@@ -0,0 +1,3 @@
+const h = config => config.height - config.margin.top - config.margin.bottom;
+
+export default h;

package/src/util/isBrushed.js

@@ -0,0 +1,15 @@
+const isBrushed = (config, brushGroup) => {
+  if (config.brushed && config.brushed.length !== config.data.length)
+    return true;
+
+  const object = brushGroup.currentMode().brushState();
+
+  for (let key in object) {
+    if (object.hasOwnProperty(key)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+export default isBrushed;

package/src/util/renderQueue.js

@@ -0,0 +1,67 @@
+import 'requestanimationframe';
+
+const renderQueue = function(func) {
+  let _queue = [], // data to be rendered
+    _rate = 1000, // number of calls per frame
+    _invalidate = function() {}, // invalidate last render queue
+    _clear = function() {}; // clearing function
+
+  let rq = function(data) {
+    if (data) rq.data(data);
+    _invalidate();
+    _clear();
+    rq.render();
+  };
+
+  rq.render = function() {
+    let valid = true;
+    _invalidate = rq.invalidate = function() {
+      valid = false;
+    };
+
+    function doFrame() {
+      if (!valid) return true;
+      let chunk = _queue.splice(0, _rate);
+      chunk.map(func);
+      requestAnimationFrame(doFrame);
+    }
+
+    doFrame();
+  };
+
+  rq.data = function(data) {
+    _invalidate();
+    _queue = data.slice(0); // creates a copy of the data
+    return rq;
+  };
+
+  rq.add = function(data) {
+    _queue = _queue.concat(data);
+  };
+
+  rq.rate = function(value) {
+    if (!arguments.length) return _rate;
+    _rate = value;
+    return rq;
+  };
+
+  rq.remaining = function() {
+    return _queue.length;
+  };
+
+  // clear the canvas
+  rq.clear = function(func) {
+    if (!arguments.length) {
+      _clear();
+      return rq;
+    }
+    _clear = func;
+    return rq;
+  };
+
+  rq.invalidate = _invalidate;
+
+  return rq;
+};
+
+export default renderQueue;

package/src/util/rotateLabels.js

@@ -0,0 +1,18 @@
+const rotateLabels = (config, pc) => (event) => {
+  if (!config.rotateLabels) return;
+
+  let delta = event.deltaY;
+  delta = delta < 0 ? -5 : delta;
+  delta = delta > 0 ? 5 : delta;
+
+  config.dimensionTitleRotation += delta;
+  pc.svg
+    .selectAll('text.label')
+    .attr(
+      'transform',
+      'translate(0,-5) rotate(' + config.dimensionTitleRotation + ')'
+    );
+  event.preventDefault();
+};
+
+export default rotateLabels;

package/src/util/width.js

@@ -0,0 +1,3 @@
+const w = config => config.width - config.margin.right - config.margin.left;
+
+export default w;