@jrkasprzyk/parcoord-es 3.0.0

package/src/brush/angular/brushReset.js

@@ -0,0 +1,14 @@
+import onDragEnd from './onDragEnd';
+import removeStrum from './removeStrum';
+
+const brushReset = (brushGroup, state, config, pc, events) => () => {
+  const ids = Object.getOwnPropertyNames(state.arcs).filter(d => !isNaN(d));
+
+  ids.forEach(d => {
+    state.arcs.active = d;
+    removeStrum(state, pc);
+  });
+  onDragEnd(brushGroup, state, config, pc, events)();
+};
+
+export default brushReset;

package/src/brush/angular/index.js

@@ -0,0 +1,19 @@
+import uninstall from './uninstall';
+import install from './install';
+import selected from './selected';
+
+const installAngularBrush = (brushGroup, config, pc, events, xscale) => {
+  const state = {
+    arcs: {},
+    strumRect: {},
+  };
+
+  brushGroup.modes['angular'] = {
+    install: install(brushGroup, state, config, pc, events, xscale),
+    uninstall: uninstall(state, pc),
+    selected: selected(brushGroup, state, config),
+    brushState: () => state.arcs,
+  };
+};
+
+export default installAngularBrush;

package/src/brush/angular/install.js

@@ -0,0 +1,141 @@
+import { drag } from 'd3-drag';
+import onDragEnd from './onDragEnd';
+import onDrag from './onDrag';
+import onDragStart from './onDragStart';
+import removeStrum from './removeStrum';
+import brushReset from './brushReset';
+import w from '../../util/width';
+import h from '../../util/height';
+
+import hypothenuse from './util/hypothenuse';
+import consecutive from '../consecutive';
+
+// returns angles in [-PI/2, PI/2]
+const angle = (p1, p2) => {
+  const a = p1[0] - p2[0],
+    b = p1[1] - p2[1],
+    c = hypothenuse(a, b);
+
+  return Math.asin(b / c);
+};
+
+const endAngle = state => id => {
+  const arc = state.arcs[id];
+  if (arc === undefined) {
+    return undefined;
+  }
+  let sAngle = angle(arc.p1, arc.p2),
+    uAngle = -sAngle + Math.PI / 2;
+
+  if (arc.p1[0] > arc.p2[0]) {
+    uAngle = 2 * Math.PI - uAngle;
+  }
+
+  return uAngle;
+};
+
+const startAngle = state => id => {
+  const arc = state.arcs[id];
+  if (arc === undefined) {
+    return undefined;
+  }
+
+  let sAngle = angle(arc.p1, arc.p3),
+    uAngle = -sAngle + Math.PI / 2;
+
+  if (arc.p1[0] > arc.p3[0]) {
+    uAngle = 2 * Math.PI - uAngle;
+  }
+
+  return uAngle;
+};
+
+const length = state => id => {
+  const arc = state.arcs[id];
+
+  if (arc === undefined) {
+    return undefined;
+  }
+
+  const a = arc.p1[0] - arc.p2[0],
+    b = arc.p1[1] - arc.p2[1];
+
+  return hypothenuse(a, b);
+};
+
+const install = (brushGroup, state, config, pc, events, xscale) => () => {
+  if (!pc.g()) {
+    pc.createAxes();
+  }
+
+  const _drag = drag();
+
+  // Map of current arcs. arcs are stored per segment of the PC. A segment,
+  // being the area between two axes. The left most area is indexed at 0.
+  state.arcs.active = undefined;
+  // Returns the width of the PC segment where currently a arc is being
+  // placed. NOTE: even though they are evenly spaced in our current
+  // implementation, we keep for when non-even spaced segments are supported as
+  // well.
+  state.arcs.width = id => {
+    const arc = state.arcs[id];
+    return arc === undefined ? undefined : arc.maxX - arc.minX;
+  };
+
+  // returns angles in [0, 2 * PI]
+  state.arcs.endAngle = endAngle(state);
+  state.arcs.startAngle = startAngle(state);
+  state.arcs.length = length(state);
+
+  pc.on('axesreorder.arcs', () => {
+    const ids = Object.getOwnPropertyNames(arcs).filter(d => !isNaN(d));
+
+    if (ids.length > 0) {
+      // We have some arcs, which might need to be removed.
+      ids.forEach(d => {
+        const dims = arcs[d].dims;
+        state.arcs.active = d;
+        // If the two dimensions of the current arc are not next to each other
+        // any more, than we'll need to remove the arc. Otherwise we keep it.
+        if (!consecutive(dims)(dims.left, dims.right)) {
+          removeStrum(state, pc);
+        }
+      });
+      onDragEnd(brushGroup, state, config, pc, events)();
+    }
+  });
+
+  // Add a new svg group in which we draw the arcs.
+  pc.selection
+    .select('svg')
+    .append('g')
+    .attr('id', 'arcs')
+    .attr(
+      'transform',
+      'translate(' + config.margin.left + ',' + config.margin.top + ')'
+    );
+
+  // Install the required brushReset function
+  pc.brushReset = brushReset(brushGroup, state, config, pc, events);
+
+  _drag
+    .on('start', onDragStart(state, config, pc, xscale))
+    .on('drag', onDrag(brushGroup, state, config, pc, events))
+    .on('end', onDragEnd(brushGroup, state, config, pc, events));
+
+  // NOTE: The styling needs to be done here and not in the css. This is because
+  //       for 1D brushing, the canvas layers should not listen to
+  //       pointer-events._.
+  state.strumRect = pc.selection
+    .select('svg')
+    .insert('rect', 'g#arcs')
+    .attr('id', 'arc-events')
+    .attr('x', config.margin.left)
+    .attr('y', config.margin.top)
+    .attr('width', w(config))
+    .attr('height', h(config) + 2)
+    .style('opacity', 0)
+    .call(_drag);
+};
+
+export default install;

package/src/brush/angular/onDrag.js

@@ -0,0 +1,109 @@
+import { select } from 'd3-selection';
+import { drag } from 'd3-drag';
+import onDragEnd from './onDragEnd';
+
+const drawStrum = (brushGroup, state, config, pc, events, arc, activePoint) => {
+  const svg = pc.selection.select('svg').select('g#arcs'),
+    id = arc.dims.i,
+    points = [arc.p2, arc.p3],
+    _line = svg
+      .selectAll('line#arc-' + id)
+      .data([{ p1: arc.p1, p2: arc.p2 }, { p1: arc.p1, p2: arc.p3 }]),
+    circles = svg.selectAll('circle#arc-' + id).data(points),
+    _drag = drag(),
+    _path = svg.selectAll('path#arc-' + id).data([arc]);
+
+  _path
+    .enter()
+    .append('path')
+    .attr('id', 'arc-' + id)
+    .attr('class', 'arc')
+    .style('fill', 'orange')
+    .style('opacity', 0.5);
+
+  _path
+    .attr('d', arc.arc)
+    .attr('transform', 'translate(' + arc.p1[0] + ',' + arc.p1[1] + ')');
+
+  _line
+    .enter()
+    .append('line')
+    .attr('id', 'arc-' + id)
+    .attr('class', 'arc');
+
+  _line
+    .attr('x1', d => d.p1[0])
+    .attr('y1', d => d.p1[1])
+    .attr('x2', d => d.p2[0])
+    .attr('y2', d => d.p2[1])
+    .attr('stroke', 'black')
+    .attr('stroke-width', 2);
+
+  _drag
+    .on('drag', (event, d) => {
+      const i = points.indexOf(d) + 2;
+
+      arc['p' + i][0] = Math.min(Math.max(arc.minX + 1, event.x), arc.maxX);
+      arc['p' + i][1] = Math.min(Math.max(arc.minY, event.y), arc.maxY);
+
+      const angle =
+        i === 3 ? state.arcs.startAngle(id) : state.arcs.endAngle(id);
+
+      if (
+        (arc.startAngle < Math.PI &&
+          arc.endAngle < Math.PI &&
+          angle < Math.PI) ||
+        (arc.startAngle >= Math.PI &&
+          arc.endAngle >= Math.PI &&
+          angle >= Math.PI)
+      ) {
+        if (i === 2) {
+          arc.endAngle = angle;
+          arc.arc.endAngle(angle);
+        } else if (i === 3) {
+          arc.startAngle = angle;
+          arc.arc.startAngle(angle);
+        }
+      }
+
+      drawStrum(brushGroup, state, config, pc, events, arc, i - 2);
+    })
+    .on('end', onDragEnd(brushGroup, state, config, pc, events));
+
+  circles
+    .enter()
+    .append('circle')
+    .attr('id', 'arc-' + id)
+    .attr('class', 'arc');
+
+  circles
+    .attr('cx', d => d[0])
+    .attr('cy', d => d[1])
+    .attr('r', 5)
+    .style(
+      'opacity',
+      (d, i) => (activePoint !== undefined && i === activePoint ? 0.8 : 0)
+    )
+    .on('mouseover', function() {
+      select(this).style('opacity', 0.8);
+    })
+    .on('mouseout', function() {
+      select(this).style('opacity', 0);
+    })
+    .call(_drag);
+};
+
+const onDrag = (brushGroup, state, config, pc, events) => (event) => {
+  const arc = state.arcs[state.arcs.active];
+
+  // Make sure that the point is within the bounds
+  arc.p2[0] = Math.min(
+    Math.max(arc.minX + 1, event.x - config.margin.left),
+    arc.maxX
+  );
+  arc.p2[1] = Math.min(Math.max(arc.minY, event.y - config.margin.top), arc.maxY);
+  arc.p3 = arc.p2.slice();
+  drawStrum(brushGroup, state, config, pc, events, arc, 1);
+};
+
+export default onDrag;

package/src/brush/angular/onDragEnd.js

@@ -0,0 +1,30 @@
+import selected from './selected';
+import removeStrum from './removeStrum';
+
+const onDragEnd = (brushGroup, state, config, pc, events) => () => {
+  const arc = state.arcs[state.arcs.active];
+
+  // Okay, somewhat unexpected, but not totally unsurprising, a mousclick is
+  // considered a drag without move. So we have to deal with that case
+  if (arc && arc.p1[0] === arc.p2[0] && arc.p1[1] === arc.p2[1]) {
+    removeStrum(state, pc);
+  }
+
+  if (arc) {
+    const angle = state.arcs.startAngle(state.arcs.active);
+
+    arc.startAngle = angle;
+    arc.endAngle = angle;
+    arc.arc
+      .outerRadius(state.arcs.length(state.arcs.active))
+      .startAngle(angle)
+      .endAngle(angle);
+  }
+
+  state.arcs.active = undefined;
+  config.brushed = selected(brushGroup, state, config);
+  pc.renderBrushed();
+  events.call('brushend', pc, config.brushed);
+};
+
+export default onDragEnd;

package/src/brush/angular/onDragStart.js

@@ -0,0 +1,38 @@
+import { pointer } from 'd3-selection';
+import { arc as d3Arc } from 'd3-shape';
+import dimensionsForPoint from '../dimensionsForPoint';
+import h from '../../util/height';
+
+// First we need to determine between which two axes the arc was started.
+// This will determine the freedom of movement, because a arc can
+// logically only happen between two axes, so no movement outside these axes
+// should be allowed.
+const onDragStart = (state, config, pc, xscale) => (event) => {
+  const p = pointer(event, state.strumRect.node());
+
+  p[0] = p[0] - config.margin.left;
+  p[1] = p[1] - config.margin.top;
+
+  const dims = dimensionsForPoint(config, pc, xscale, p);
+  const arc = {
+    p1: p,
+    dims: dims,
+    minX: xscale(dims.left),
+    maxX: xscale(dims.right),
+    minY: 0,
+    maxY: h(config),
+    startAngle: undefined,
+    endAngle: undefined,
+    arc: d3Arc().innerRadius(0),
+  };
+
+  // Make sure that the point is within the bounds
+  arc.p1[0] = Math.min(Math.max(arc.minX, p[0]), arc.maxX);
+  arc.p2 = arc.p1.slice();
+  arc.p3 = arc.p1.slice();
+
+  state.arcs[dims.i] = arc;
+  state.arcs.active = dims.i;
+};
+
+export default onDragStart;

package/src/brush/angular/removeStrum.js

@@ -0,0 +1,12 @@
+const removeStrum = (state, pc) => {
+  const arc = state.arcs[state.arcs.active],
+    svg = pc.selection.select('svg').select('g#arcs');
+
+  delete state.arcs[state.arcs.active];
+  state.arcs.active = undefined;
+  svg.selectAll('line#arc-' + arc.dims.i).remove();
+  svg.selectAll('circle#arc-' + arc.dims.i).remove();
+  svg.selectAll('path#arc-' + arc.dims.i).remove();
+};
+
+export default removeStrum;

package/src/brush/angular/selected.js

@@ -0,0 +1,63 @@
+import hypothenuse from './util/hypothenuse';
+
+// [0, 2*PI] -> [-PI/2, PI/2]
+const signedAngle = angle =>
+  angle > Math.PI ? 1.5 * Math.PI - angle : 0.5 * Math.PI - angle;
+
+/**
+ * angles are stored in radians from in [0, 2*PI], where 0 in 12 o'clock.
+ * However, one can only select lines from 0 to PI, so we compute the
+ * 'signed' angle, where 0 is the horizontal line (3 o'clock), and +/- PI/2
+ * are 12 and 6 o'clock respectively.
+ */
+const containmentTest = arc => a => {
+  let startAngle = signedAngle(arc.startAngle);
+  let endAngle = signedAngle(arc.endAngle);
+
+  if (startAngle > endAngle) {
+    const tmp = startAngle;
+    startAngle = endAngle;
+    endAngle = tmp;
+  }
+
+  // test if segment angle is contained in angle interval
+  return a >= startAngle && a <= endAngle;
+};
+
+const crossesStrum = (state, config) => (d, id) => {
+  const arc = state.arcs[id],
+    test = containmentTest(arc),
+    d1 = arc.dims.left,
+    d2 = arc.dims.right,
+    y1 = config.dimensions[d1].yscale,
+    y2 = config.dimensions[d2].yscale,
+    a = state.arcs.width(id),
+    b = y1(d[d1]) - y2(d[d2]),
+    c = hypothenuse(a, b),
+    angle = Math.asin(b / c); // rad in [-PI/2, PI/2]
+  return test(angle);
+};
+
+const selected = (brushGroup, state, config) => {
+  const ids = Object.getOwnPropertyNames(state.arcs).filter(d => !isNaN(d));
+  const brushed = config.data;
+
+  if (ids.length === 0) {
+    return brushed;
+  }
+
+  const crossTest = crossesStrum(state, config);
+
+  return brushed.filter(d => {
+    switch (brushGroup.predicate) {
+      case 'AND':
+        return ids.every(id => crossTest(d, id));
+      case 'OR':
+        return ids.some(id => crossTest(d, id));
+      default:
+        throw new Error('Unknown brush predicate ' + config.brushPredicate);
+    }
+  });
+};
+
+export default selected;

package/src/brush/angular/uninstall.js

@@ -0,0 +1,17 @@
+const uninstall = (state, pc) => () => {
+  pc.selection
+    .select('svg')
+    .select('g#arcs')
+    .remove();
+  pc.selection
+    .select('svg')
+    .select('rect#arc-events')
+    .remove();
+  pc.on('axesreorder.arcs', undefined);
+
+  delete pc.brushReset;
+
+  state.strumRect = undefined;
+};
+
+export default uninstall;

package/src/brush/angular/util/hypothenuse.js

@@ -0,0 +1,3 @@
+const hypothenuse = (a, b) => Math.sqrt(a * a + b * b);
+
+export default hypothenuse;

package/src/brush/consecutive.js

@@ -0,0 +1,11 @@
+// Checks if the first dimension is directly left of the second dimension.
+const consecutive = dimensions => (first, second) => {
+  const keys = Object.keys(dimensions);
+
+  return keys.some(
+    (d, i) =>
+      d === first ? i + i < keys.length && dimensions[i + 1] === second : false
+  );
+};
+
+export default consecutive;

package/src/brush/dimensionsForPoint.js

@@ -0,0 +1,32 @@
+const dimensionsForPoint = (config, pc, xscale, p) => {
+  const dims = { i: -1, left: undefined, right: undefined };
+  Object.keys(config.dimensions).some((dim, i) => {
+    if (xscale(dim) < p[0]) {
+      dims.i = i;
+      dims.left = dim;
+      dims.right = Object.keys(config.dimensions)[
+        pc.getOrderedDimensionKeys().indexOf(dim) + 1
+      ];
+      return false;
+    }
+    return true;
+  });
+
+  if (dims.left === undefined) {
+    // Event on the left side of the first axis.
+    dims.i = 0;
+    dims.left = pc.getOrderedDimensionKeys()[0];
+    dims.right = pc.getOrderedDimensionKeys()[1];
+  } else if (dims.right === undefined) {
+    // Event on the right side of the last axis
+    dims.i = Object.keys(config.dimensions).length - 1;
+    dims.right = dims.left;
+    dims.left = pc.getOrderedDimensionKeys()[
+      Object.keys(config.dimensions).length - 2
+    ];
+  }
+
+  return dims;
+};
+
+export default dimensionsForPoint;

package/src/brush/invertByScale.js

@@ -0,0 +1,24 @@
+const invertCategorical = (selection, scale) => {
+  if (selection.length === 0) {
+    return [];
+  }
+  const domain = scale.domain();
+  const range = scale.range();
+  const found = [];
+  range.forEach((d, i) => {
+    if (d >= selection[0] && d <= selection[1]) {
+      found.push(domain[i]);
+    }
+  });
+  return found;
+};
+
+const invertByScale = (selection, scale) => {
+  if (scale === null) return [];
+  return typeof scale.invert === 'undefined'
+    ? invertCategorical(selection, scale)
+    : selection.map(d => scale.invert(d));
+};
+
+export default invertByScale;
+export { invertByScale };

package/src/brush/strums/brushReset.js

@@ -0,0 +1,14 @@
+import onDragEnd from './onDragEnd';
+import removeStrum from './removeStrum';
+
+const brushReset = (brushGroup, state, config, pc, events) => () => {
+  const ids = Object.getOwnPropertyNames(state.strums).filter(d => !isNaN(d));
+
+  ids.forEach(d => {
+    state.strums.active = d;
+    removeStrum(state, pc);
+  });
+  onDragEnd(brushGroup, state, config, pc, events)();
+};
+
+export default brushReset;

package/src/brush/strums/index.js

@@ -0,0 +1,19 @@
+import uninstall from './uninstall';
+import install from './install';
+import selected from './selected';
+
+const install2DStrums = (brushGroup, config, pc, events, xscale) => {
+  const state = {
+    strums: {},
+    strumRect: {},
+  };
+
+  brushGroup.modes['2D-strums'] = {
+    install: install(brushGroup, state, config, pc, events, xscale),
+    uninstall: uninstall(state, pc),
+    selected: selected(brushGroup, state, config),
+    brushState: () => state.strums,
+  };
+};
+
+export default install2DStrums;

package/src/brush/strums/install.js

@@ -0,0 +1,81 @@
+import { drag } from 'd3-drag';
+import onDragEnd from './onDragEnd';
+import onDrag from './onDrag';
+import onDragStart from './onDragStart';
+import removeStrum from './removeStrum';
+import brushReset from './brushReset';
+import w from '../../util/width';
+import h from '../../util/height';
+import consecutive from '../consecutive';
+
+const install = (brushGroup, state, config, pc, events, xscale) => () => {
+  if (pc.g() === undefined || pc.g() === null) {
+    pc.createAxes();
+  }
+
+  const _drag = drag();
+
+  // Map of current strums. Strums are stored per segment of the PC. A segment,
+  // being the area between two axes. The left most area is indexed at 0.
+  state.strums.active = undefined;
+  // Returns the width of the PC segment where currently a strum is being
+  // placed. NOTE: even though they are evenly spaced in our current
+  // implementation, we keep for when non-even spaced segments are supported as
+  // well.
+  state.strums.width = id =>
+    state.strums[id] === undefined
+      ? undefined
+      : state.strums[id].maxX - state.strums[id].minX;
+
+  pc.on('axesreorder.strums', () => {
+    const ids = Object.getOwnPropertyNames(state.strums).filter(d => !isNaN(d));
+
+    if (ids.length > 0) {
+      // We have some strums, which might need to be removed.
+      ids.forEach(d => {
+        const dims = state.strums[d].dims;
+        state.strums.active = d;
+        // If the two dimensions of the current strum are not next to each other
+        // any more, than we'll need to remove the strum. Otherwise we keep it.
+        if (!consecutive(config.dimensions)(dims.left, dims.right)) {
+          removeStrum(state, pc);
+        }
+      });
+      onDragEnd(brushGroup, state, config, pc, events)();
+    }
+  });
+
+  // Add a new svg group in which we draw the strums.
+  pc.selection
+    .select('svg')
+    .append('g')
+    .attr('id', 'strums')
+    .attr(
+      'transform',
+      'translate(' + config.margin.left + ',' + config.margin.top + ')'
+    );
+
+  // Install the required brushReset function
+  pc.brushReset = brushReset(brushGroup, state, config, pc, events);
+
+  _drag
+    .on('start', onDragStart(state, config, pc, xscale))
+    .on('drag', onDrag(brushGroup, state, config, pc, events))
+    .on('end', onDragEnd(brushGroup, state, config, pc, events));
+
+  // NOTE: The styling needs to be done here and not in the css. This is because
+  //       for 1D brushing, the canvas layers should not listen to
+  //       pointer-events._.
+  state.strumRect = pc.selection
+    .select('svg')
+    .insert('rect', 'g#strums')
+    .attr('id', 'strum-events')
+    .attr('x', config.margin.left)
+    .attr('y', config.margin.top)
+    .attr('width', w(config))
+    .attr('height', h(config) + 2)
+    .style('opacity', 0)
+    .call(_drag);
+};
+
+export default install;