@jrkasprzyk/parcoord-es 3.0.0

package/src/api/detectDimensions.js

@@ -0,0 +1,7 @@
+const detectDimensions = pc =>
+  function() {
+    pc.dimensions(pc.applyDimensionDefaults());
+    return this;
+  };
+
+export default detectDimensions;

package/src/api/flip.js

@@ -0,0 +1,11 @@
+const flip = config =>
+  function(d) {
+    //__.dimensions[d].yscale.domain().reverse();                               // does not work
+    config.dimensions[d].yscale.domain(
+      config.dimensions[d].yscale.domain().reverse()
+    ); // works
+
+    return this;
+  };
+
+export default flip;

package/src/api/getOrderedDimensionKeys.js

@@ -0,0 +1,8 @@
+import { ascending } from 'd3-array';
+
+const getOrderedDimensionKeys = config => () =>
+  Object.keys(config.dimensions).sort((x, y) =>
+    ascending(config.dimensions[x].index, config.dimensions[y].index)
+  );
+
+export default getOrderedDimensionKeys;

package/src/api/highlight.js

@@ -0,0 +1,26 @@
+import { selectAll } from 'd3-selection';
+
+import colorPath from '../util/colorPath';
+import functor from '../util/functor';
+
+const pathHighlight = (config, ctx, position) => (d, i) => {
+  ctx.highlight.strokeStyle = functor(config.color)(d, i);
+  return colorPath(config, position, d, ctx.highlight);
+};
+
+// highlight an array of data
+const highlight = (config, pc, canvas, events, ctx, position) =>
+  function(data = null) {
+    if (data === null) {
+      return config.highlighted;
+    }
+
+    config.highlighted = data;
+    pc.clear('highlight');
+    selectAll([canvas.foreground, canvas.brushed]).classed('faded', true);
+    data.forEach(pathHighlight(config, ctx, position));
+    events.call('highlight', this, data);
+    return this;
+  };
+
+export default highlight;

package/src/api/init.js

@@ -0,0 +1,53 @@
+import { select } from 'd3-selection';
+
+/**
+ * Setup a new parallel coordinates chart.
+ *
+ * @param config
+ * @param canvas
+ * @param ctx
+ * @returns {pc} a parcoords closure
+ */
+const init = (config, canvas, ctx) => {
+  /**
+   * Create the chart within a container. The selector can also be a d3 selection.
+   *
+   * @param selection a d3 selection
+   * @returns {pc} instance for chained api
+   */
+  const pc = function(selection) {
+    selection = pc.selection = select(selection);
+
+    config.width = selection.node().clientWidth;
+    config.height = selection.node().clientHeight;
+    // canvas data layers
+    ['dots', 'foreground', 'brushed', 'marked', 'highlight'].forEach(layer => {
+      canvas[layer] = selection
+        .append('canvas')
+        .attr('class', layer)
+        .node();
+      ctx[layer] = canvas[layer].getContext('2d');
+    });
+
+    // svg tick and brush layers
+    pc.svg = selection
+      .append('svg')
+      .attr('width', config.width)
+      .attr('height', config.height)
+      .style('font', '14px sans-serif')
+      .style('position', 'absolute')
+
+      .append('svg:g')
+      .attr(
+        'transform',
+        'translate(' + config.margin.left + ',' + config.margin.top + ')'
+      );
+    // for chained api
+    return pc;
+  };
+
+  // for partial-application style programming
+  return pc;
+};
+
+export default init;

package/src/api/interactive.js

@@ -0,0 +1,7 @@
+const interactive = flags =>
+  function() {
+    flags.interactive = true;
+    return this;
+  };
+
+export default interactive;

package/src/api/intersection.js

@@ -0,0 +1,16 @@
+// calculate 2d intersection of line a->b with line c->d
+// points are objects with x and y properties
+const intersection = (a, b, c, d) => {
+  return {
+    x:
+      ((a.x * b.y - a.y * b.x) * (c.x - d.x) -
+        (a.x - b.x) * (c.x * d.y - c.y * d.x)) /
+      ((a.x - b.x) * (c.y - d.y) - (a.y - b.y) * (c.x - d.x)),
+    y:
+      ((a.x * b.y - a.y * b.x) * (c.y - d.y) -
+        (a.y - b.y) * (c.x * d.y - c.y * d.x)) /
+      ((a.x - b.x) * (c.y - d.y) - (a.y - b.y) * (c.x - d.x)),
+  };
+};
+
+export default intersection;

package/src/api/mark.js

@@ -0,0 +1,20 @@
+import { selectAll } from 'd3-selection';
+
+import { pathMark } from './renderMarked';
+
+// mark an array of data
+const mark = (config, pc, canvas, events, ctx, position) =>
+  function(data = null) {
+    if (data === null) {
+      return config.marked;
+    }
+
+    // add array to already marked data
+    config.marked = config.marked.concat(data);
+    selectAll([canvas.foreground, canvas.brushed]).classed('dimmed', true);
+    data.forEach(pathMark(config, ctx, position));
+    events.call('mark', this, data);
+    return this;
+  };
+
+export default mark;

package/src/api/mergeParcoords.js

@@ -0,0 +1,86 @@
+import { select, selectAll } from 'd3-selection';
+
+// Merges the canvases and SVG elements into one canvas element which is then passed into the callback
+// (so you can choose to save it to disk, etc.)
+const mergeParcoords = pc => callback => {
+  // Retina display, etc.
+  const devicePixelRatio = window.devicePixelRatio || 1;
+
+  // Create a canvas element to store the merged canvases
+  const mergedCanvas = document.createElement('canvas');
+
+  const foregroundCanvas = pc.canvas.foreground;
+  // We will need to adjust for canvas margins to align the svg and canvas
+  const canvasMarginLeft = Number(
+    foregroundCanvas.style.marginLeft.replace('px', '')
+  );
+
+  const textTopAdjust = 15;
+  const canvasMarginTop =
+    Number(foregroundCanvas.style.marginTop.replace('px', '')) + textTopAdjust;
+  const width =
+    (foregroundCanvas.clientWidth + canvasMarginLeft) * devicePixelRatio;
+  const height =
+    (foregroundCanvas.clientHeight + canvasMarginTop) * devicePixelRatio;
+  mergedCanvas.width = width + 50; // pad so that svg labels at right will not get cut off
+  mergedCanvas.height = height + 30; // pad so that svg labels at bottom will not get cut off
+  mergedCanvas.style.width = mergedCanvas.width / devicePixelRatio + 'px';
+  mergedCanvas.style.height = mergedCanvas.height / devicePixelRatio + 'px';
+
+  // Give the canvas a white background
+  const context = mergedCanvas.getContext('2d');
+  context.fillStyle = '#ffffff';
+  context.fillRect(0, 0, mergedCanvas.width, mergedCanvas.height);
+
+  // Merge all the canvases
+  for (const key in pc.canvas) {
+    context.drawImage(
+      pc.canvas[key],
+      canvasMarginLeft * devicePixelRatio,
+      canvasMarginTop * devicePixelRatio,
+      width - canvasMarginLeft * devicePixelRatio,
+      height - canvasMarginTop * devicePixelRatio
+    );
+  }
+
+  // Add SVG elements to canvas
+  const DOMURL = window.URL || window.webkitURL || window;
+  const serializer = new XMLSerializer();
+  // axis labels are translated (0,-5) so we will clone the svg
+  //   and translate down so the labels are drawn on the canvas
+  const svgNodeCopy = pc.selection
+    .select('svg')
+    .node()
+    .cloneNode(true);
+  svgNodeCopy.setAttribute('transform', 'translate(0,' + textTopAdjust + ')');
+  svgNodeCopy.setAttribute(
+    'height',
+    svgNodeCopy.getAttribute('height') + textTopAdjust
+  );
+  // text will need fill attribute since css styles will not get picked up
+  //   this is not sophisticated since it doesn't look up css styles
+  //   if the user changes
+  select(svgNodeCopy)
+    .selectAll('text')
+    .attr('fill', 'black');
+  const svgStr = serializer.serializeToString(svgNodeCopy);
+
+  // Create a Data URI.
+  const src = 'data:image/svg+xml;base64,' + window.btoa(svgStr);
+  const img = new Image();
+  img.onload = () => {
+    context.drawImage(
+      img,
+      0,
+      0,
+      img.width * devicePixelRatio,
+      img.height * devicePixelRatio
+    );
+    if (typeof callback === 'function') {
+      callback(mergedCanvas);
+    }
+  };
+  img.src = src;
+};
+
+export default mergeParcoords;

package/src/api/removeAxes.js

@@ -0,0 +1,9 @@
+const removeAxes = pc =>
+  function() {
+    pc._g.remove();
+
+    delete pc._g;
+    return this;
+  };
+
+export default removeAxes;

package/src/api/render.js

@@ -0,0 +1,26 @@
+/**
+ * Renders the polylines.
+ * If no dimensions have been specified, it will attempt to detect quantitative
+ * dimensions based on the first data entry. If scales haven't been set, it will
+ * autoscale based on the extent for each dimension.
+ *
+ * @param config
+ * @param pc
+ * @param events
+ * @returns {Function}
+ */
+const render = (config, pc, events) =>
+  function() {
+    // try to autodetect dimensions and create scales
+    if (!Object.keys(config.dimensions).length) {
+      pc.detectDimensions();
+    }
+    pc.autoscale();
+
+    pc.render[config.mode]();
+
+    events.call('render', this);
+    return this;
+  };
+
+export default render;

package/src/api/renderBrushed.js

@@ -0,0 +1,39 @@
+import isBrushed from '../util/isBrushed';
+import colorPath from '../util/colorPath';
+import functor from '../util/functor';
+
+const pathBrushed = (config, ctx, position) => (d, i) => {
+  if (config.brushedColor !== null) {
+    ctx.brushed.strokeStyle = functor(config.brushedColor)(d, i);
+  } else {
+    ctx.brushed.strokeStyle = functor(config.color)(d, i);
+  }
+  return colorPath(config, position, d, ctx.brushed);
+};
+
+const renderBrushedDefault = (config, ctx, position, pc, brushGroup) => () => {
+  pc.clear('brushed');
+
+  if (isBrushed(config, brushGroup) && config.brushed !== false) {
+    config.brushed.forEach(pathBrushed(config, ctx, position));
+  }
+};
+
+const renderBrushedQueue = (config, brushGroup, brushedQueue) => () => {
+  if (isBrushed(config, brushGroup)) {
+    brushedQueue(config.brushed);
+  } else {
+    brushedQueue([]); // This is needed to clear the currently brushed items
+  }
+};
+
+const renderBrushed = (config, pc, events) =>
+  function() {
+    if (!Object.keys(config.dimensions).length) pc.detectDimensions();
+
+    pc.renderBrushed[config.mode]();
+    events.call('render', this);
+    return this;
+  };
+
+export { pathBrushed, renderBrushed, renderBrushedDefault, renderBrushedQueue };

package/src/api/renderDefault.js

@@ -0,0 +1,27 @@
+import colorPath from '../util/colorPath';
+import functor from '../util/functor';
+
+const pathForeground = (config, ctx, position) => (d, i) => {
+  ctx.foreground.strokeStyle = functor(config.color)(d, i);
+  return colorPath(config, position, d, ctx.foreground);
+};
+
+const renderDefault = (config, pc, ctx, position) => () => {
+  pc.clear('foreground');
+  pc.clear('highlight');
+
+  pc.renderBrushed.default();
+  pc.renderMarked.default();
+
+  config.data.forEach(pathForeground(config, ctx, position));
+};
+
+const renderDefaultQueue = (config, pc, foregroundQueue) => () => {
+  pc.renderBrushed.queue();
+  pc.renderMarked.queue();
+  foregroundQueue(config.data);
+};
+
+export default renderDefault;
+
+export { pathForeground, renderDefaultQueue };

package/src/api/renderMarked.js

@@ -0,0 +1,34 @@
+import colorPath from '../util/colorPath';
+import functor from '../util/functor';
+
+const pathMark = (config, ctx, position) => (d, i) => {
+  ctx.marked.strokeStyle = functor(config.color)(d, i);
+  return colorPath(config, position, d, ctx.marked);
+};
+
+const renderMarkedDefault = (config, pc, ctx, position) => () => {
+  pc.clear('marked');
+
+  if (config.marked.length) {
+    config.marked.forEach(pathMark(config, ctx, position));
+  }
+};
+
+const renderMarkedQueue = (config, markedQueue) => () => {
+  if (config.marked) {
+    markedQueue(config.marked);
+  } else {
+    markedQueue([]); // This is needed to clear the currently marked items
+  }
+};
+
+const renderMarked = (config, pc, events) =>
+  function() {
+    if (!Object.keys(config.dimensions).length) pc.detectDimensions();
+
+    pc.renderMarked[config.mode]();
+    events.call('render', this);
+    return this;
+  };
+
+export { pathMark, renderMarked, renderMarkedDefault, renderMarkedQueue };

package/src/api/reorder.js

@@ -0,0 +1,37 @@
+// Reorder dimensions, such that the highest value (visually) is on the left and
+// the lowest on the right. Visual values are determined by the data values in
+// the given row.
+const reorder = (config, pc, xscale) => rowdata => {
+  const firstDim = pc.getOrderedDimensionKeys()[0];
+
+  pc.sortDimensionsByRowData(rowdata);
+  // NOTE: this is relatively cheap given that:
+  // number of dimensions < number of data items
+  // Thus we check equality of order to prevent rerendering when this is the case.
+  const reordered = firstDim !== pc.getOrderedDimensionKeys()[0];
+
+  if (reordered) {
+    xscale.domain(pc.getOrderedDimensionKeys());
+    const highlighted = config.highlighted.slice(0);
+    pc.unhighlight();
+
+    const marked = config.marked.slice(0);
+    pc.unmark();
+
+    const g = pc.g();
+    g.transition()
+      .duration(1500)
+      .attr('transform', d => 'translate(' + xscale(d) + ')');
+    pc.render();
+
+    // pc.highlight() does not check whether highlighted is length zero, so we do that here.
+    if (highlighted.length !== 0) {
+      pc.highlight(highlighted);
+    }
+    if (marked.length !== 0) {
+      pc.mark(marked);
+    }
+  }
+};
+
+export default reorder;

package/src/api/reorderable.js

@@ -0,0 +1,41 @@
+import { drag } from 'd3-drag';
+import { select } from 'd3-selection';
+
+import w from '../util/width';
+
+// Jason Davies, http://bl.ocks.org/1341281
+const reorderable = (config, pc, xscale, position, dragging, flags) =>
+  function() {
+    if (pc.g() === undefined) pc.createAxes();
+    const g = pc.g();
+
+    g.style('cursor', 'move').call(
+      drag()
+        .on('start', function(event, d) {
+          dragging[d] = this.__origin__ = xscale(d);
+        })
+        .on('drag', function(event, d) {
+          dragging[d] = Math.min(
+            w(config),
+            Math.max(0, (this.__origin__ += event.dx))
+          );
+          pc.sortDimensions();
+          xscale.domain(pc.getOrderedDimensionKeys());
+          pc.render();
+          g.attr('transform', d => 'translate(' + position(d) + ')');
+        })
+        .on('end', function(event, d) {
+          delete this.__origin__;
+          delete dragging[d];
+          select(this)
+            .transition()
+            .attr('transform', 'translate(' + xscale(d) + ')');
+          pc.render();
+          pc.renderMarked();
+        })
+    );
+    flags.reorderable = true;
+    return this;
+  };
+
+export default reorderable;

package/src/api/resize.js

@@ -0,0 +1,36 @@
+// rescale for height, width and margins
+// TODO currently assumes chart is brushable, and destroys old brushes
+const resize = (config, pc, flags, events) => {
+  return function() {
+    // selection size
+    pc.selection
+      .select('svg')
+      .attr('width', config.width)
+      .attr('height', config.height);
+    pc.svg.attr(
+      'transform',
+      'translate(' + config.margin.left + ',' + config.margin.top + ')'
+    );
+
+    // FIXME: the current brush state should pass through
+    if (flags.brushable) pc.brushReset();
+
+    // scales
+    pc.autoscale();
+
+    // axes, destroys old brushes.
+    if (pc.g()) pc.createAxes();
+    if (flags.brushable) pc.brushable();
+    if (flags.reorderable) pc.reorderable();
+
+    events.call('resize', this, {
+      width: config.width,
+      height: config.height,
+      margin: config.margin,
+    });
+
+    return this;
+  };
+};
+
+export default resize;

package/src/api/scale.js

@@ -0,0 +1,10 @@
+const scale = (config, pc) =>
+  function(d, domain) {
+    config.dimensions[d].yscale.domain(domain);
+    pc.render.default();
+    pc.updateAxes();
+
+    return this;
+  };
+
+export default scale;