@jrkasprzyk/parcoord-es 3.0.0

package/src/api/selected.js

@@ -0,0 +1,209 @@
+import { brushSelection } from 'd3-brush';
+
+const selected = (config, pc) => () => {
+  let actives = [];
+  let extents = [];
+  let ranges = {};
+  //get brush selections from each node, convert to actual values
+  //invert order of values in array to comply with the parcoords architecture
+  if (config.brushes.length === 0) {
+    let nodes = pc
+      .g()
+      .selectAll('.brush')
+      .nodes();
+    for (let k = 0; k < nodes.length; k++) {
+      if (brushSelection(nodes[k]) !== null) {
+        actives.push(nodes[k].__data__);
+        let values = [];
+        let ranger = brushSelection(nodes[k]);
+        if (
+          typeof config.dimensions[nodes[k].__data__].yscale.domain()[0] ===
+          'number'
+        ) {
+          for (let i = 0; i < ranger.length; i++) {
+            if (
+              actives.includes(nodes[k].__data__) &&
+              config.flipAxes.includes(nodes[k].__data__)
+            ) {
+              values.push(
+                config.dimensions[nodes[k].__data__].yscale.invert(ranger[i])
+              );
+            } else if (config.dimensions[nodes[k].__data__].yscale() !== 1) {
+              values.unshift(
+                config.dimensions[nodes[k].__data__].yscale.invert(ranger[i])
+              );
+            }
+          }
+          extents.push(values);
+          for (let ii = 0; ii < extents.length; ii++) {
+            if (extents[ii].length === 0) {
+              extents[ii] = [1, 1];
+            }
+          }
+        } else {
+          ranges[nodes[k].__data__] = brushSelection(nodes[k]);
+          let dimRange = config.dimensions[nodes[k].__data__].yscale.range();
+          let dimDomain = config.dimensions[nodes[k].__data__].yscale.domain();
+          for (let j = 0; j < dimRange.length; j++) {
+            if (
+              dimRange[j] >= ranger[0] &&
+              dimRange[j] <= ranger[1] &&
+              actives.includes(nodes[k].__data__) &&
+              config.flipAxes.includes(nodes[k].__data__)
+            ) {
+              values.push(dimRange[j]);
+            } else if (dimRange[j] >= ranger[0] && dimRange[j] <= ranger[1]) {
+              values.unshift(dimRange[j]);
+            }
+          }
+          extents.push(values);
+          for (let ii = 0; ii < extents.length; ii++) {
+            if (extents[ii].length === 0) {
+              extents[ii] = [1, 1];
+            }
+          }
+        }
+      }
+    }
+    // test if within range
+    const within = {
+      date: function(d, p, dimension) {
+        let category = d[p];
+        let categoryIndex = config.dimensions[p].yscale
+          .domain()
+          .indexOf(category);
+        let categoryRangeValue = config.dimensions[p].yscale.range()[
+          categoryIndex
+        ];
+        return (
+          categoryRangeValue >= ranges[p][0] &&
+          categoryRangeValue <= ranges[p][1]
+        );
+      },
+      number: function(d, p, dimension) {
+        return extents[dimension][0] <= d[p] && d[p] <= extents[dimension][1];
+      },
+      string: function(d, p, dimension) {
+        let category = d[p];
+        let categoryIndex = config.dimensions[p].yscale
+          .domain()
+          .indexOf(category);
+        let categoryRangeValue = config.dimensions[p].yscale.range()[
+          categoryIndex
+        ];
+        return (
+          categoryRangeValue >= ranges[p][0] &&
+          categoryRangeValue <= ranges[p][1]
+        );
+      },
+    };
+    return config.data.filter(d =>
+      actives.every((p, dimension) =>
+        within[config.dimensions[p].type](d, p, dimension)
+      )
+    );
+  } else {
+    // need to get data from each brush instead of each axis
+    // first must find active axes by iterating through all brushes
+    // then go through similiar process as above.
+    let multiBrushData = [];
+    for (let idx = 0; idx < config.brushes.length; idx++) {
+      let brush = config.brushes[idx];
+      let values = [];
+      let ranger = brush.extent;
+      let actives = [brush.data];
+      if (
+        typeof config.dimensions[brush.data].yscale.domain()[0] === 'number'
+      ) {
+        for (let i = 0; i < ranger.length; i++) {
+          if (
+            actives.includes(brush.data) &&
+            config.flipAxes.includes(brush.data)
+          ) {
+            values.push(config.dimensions[brush.data].yscale.invert(ranger[i]));
+          } else if (config.dimensions[brush.data].yscale() !== 1) {
+            values.unshift(
+              config.dimensions[brush.data].yscale.invert(ranger[i])
+            );
+          }
+        }
+        extents.push(values);
+        for (let ii = 0; ii < extents.length; ii++) {
+          if (extents[ii].length === 0) {
+            extents[ii] = [1, 1];
+          }
+        }
+      } else {
+        ranges[brush.data] = brush.extent;
+        let dimRange = config.dimensions[brush.data].yscale.range();
+        let dimDomain = config.dimensions[brush.data].yscale.domain();
+        for (let j = 0; j < dimRange.length; j++) {
+          if (
+            dimRange[j] >= ranger[0] &&
+            dimRange[j] <= ranger[1] &&
+            actives.includes(brush.data) &&
+            config.flipAxes.includes(brush.data)
+          ) {
+            values.push(dimRange[j]);
+          } else if (dimRange[j] >= ranger[0] && dimRange[j] <= ranger[1]) {
+            values.unshift(dimRange[j]);
+          }
+        }
+        extents.push(values);
+        for (let ii = 0; ii < extents.length; ii++) {
+          if (extents[ii].length === 0) {
+            extents[ii] = [1, 1];
+          }
+        }
+      }
+      let within = {
+        date: function(d, p, dimension) {
+          let category = d[p];
+          let categoryIndex = config.dimensions[p].yscale
+            .domain()
+            .indexOf(category);
+          let categoryRangeValue = config.dimensions[p].yscale.range()[
+            categoryIndex
+          ];
+          return (
+            categoryRangeValue >= ranges[p][0] &&
+            categoryRangeValue <= ranges[p][1]
+          );
+        },
+        number: function(d, p, dimension) {
+          return extents[idx][0] <= d[p] && d[p] <= extents[idx][1];
+        },
+        string: function(d, p, dimension) {
+          let category = d[p];
+          let categoryIndex = config.dimensions[p].yscale
+            .domain()
+            .indexOf(category);
+          let categoryRangeValue = config.dimensions[p].yscale.range()[
+            categoryIndex
+          ];
+          return (
+            categoryRangeValue >= ranges[p][0] &&
+            categoryRangeValue <= ranges[p][1]
+          );
+        },
+      };
+
+      // filter data, but instead of returning it now,
+      // put it into multiBrush data which is returned after
+      // all brushes are iterated through.
+      let filtered = config.data.filter(d =>
+        actives.every((p, dimension) =>
+          within[config.dimensions[p].type](d, p, dimension)
+        )
+      );
+      for (let z = 0; z < filtered.length; z++) {
+        multiBrushData.push(filtered[z]);
+      }
+      actives = [];
+      ranges = {};
+    }
+    return multiBrushData;
+  }
+};
+
+export default selected;

package/src/api/shadows.js

@@ -0,0 +1,9 @@
+const shadows = (flags, pc) =>
+  function() {
+    flags.shadows = true;
+    pc.alphaOnBrushed(0.1);
+    pc.render();
+    return this;
+  };
+
+export default shadows;

package/src/api/sortDimensions.js

@@ -0,0 +1,13 @@
+const sortDimensions = (config, position) => () => {
+  const copy = Object.assign({}, config.dimensions);
+  const positionSortedKeys = Object.keys(config.dimensions).sort(
+    (a, b) => (position(a) - position(b) === 0 ? 1 : position(a) - position(b))
+  );
+  config.dimensions = {};
+  positionSortedKeys.forEach((p, i) => {
+    config.dimensions[p] = copy[p];
+    config.dimensions[p].index = i;
+  });
+};
+
+export default sortDimensions;

package/src/api/sortDimensionsByRowData.js

@@ -0,0 +1,20 @@
+const sortDimensionsByRowData = config => rowdata => {
+  const copy = Object.assign({}, config.dimensions);
+  const positionSortedKeys = Object.keys(config.dimensions).sort((a, b) => {
+    const pixelDifference =
+      config.dimensions[a].yscale(rowdata[a]) -
+      config.dimensions[b].yscale(rowdata[b]);
+
+    // Array.sort is not necessarily stable, this means that if pixelDifference is zero
+    // the ordering of dimensions might change unexpectedly. This is solved by sorting on
+    // variable name in that case.
+    return pixelDifference === 0 ? a.localeCompare(b) : pixelDifference;
+  });
+  config.dimensions = {};
+  positionSortedKeys.forEach((p, i) => {
+    config.dimensions[p] = copy[p];
+    config.dimensions[p].index = i;
+  });
+};
+
+export default sortDimensionsByRowData;

package/src/api/toString.js

@@ -0,0 +1,11 @@
+// this descriptive text should live with other introspective methods
+const toString = config => () =>
+  'Parallel Coordinates: ' +
+  Object.keys(config.dimensions).length +
+  ' dimensions (' +
+  Object.keys(config.data[0]).length +
+  ' total) , ' +
+  config.data.length +
+  ' rows';
+
+export default toString;

package/src/api/toType.js

@@ -0,0 +1,9 @@
+// a better "typeof" from this post: http://stackoverflow.com/questions/7390426/better-way-to-get-type-of-a-javascript-variable
+const toType = v => {
+  return {}.toString
+    .call(v)
+    .match(/\s([a-zA-Z]+)/)[1]
+    .toLowerCase();
+};
+
+export default toType;

package/src/api/toTypeCoerceNumbers.js

@@ -0,0 +1,7 @@
+import toType from './toType';
+
+// try to coerce to number before returning type
+const toTypeCoerceNumbers = v =>
+  parseFloat(v) == v && v !== null ? 'number' : toType(v);
+
+export default toTypeCoerceNumbers;

package/src/api/unhighlight.js

@@ -0,0 +1,12 @@
+import { selectAll } from 'd3-selection';
+
+// clear highlighting
+const unhighlight = (config, pc, canvas) =>
+  function() {
+    config.highlighted = [];
+    pc.clear('highlight');
+    selectAll([canvas.foreground, canvas.brushed]).classed('faded', false);
+    return this;
+  };
+
+export default unhighlight;

package/src/api/unmark.js

@@ -0,0 +1,12 @@
+import { selectAll } from 'd3-selection';
+
+// clear marked data arrays
+const unmark = (config, pc, canvas) =>
+  function() {
+    config.marked = [];
+    pc.clear('marked');
+    selectAll([canvas.foreground, canvas.brushed]).classed('dimmed', false);
+    return this;
+  };
+
+export default unmark;

package/src/api/updateAxes.js

@@ -0,0 +1,103 @@
+import { select } from 'd3-selection';
+
+import dimensionLabels from '../util/dimensionLabels';
+import flipAxisAndUpdatePCP from '../util/flipAxisAndUpdatePCP';
+import rotateLabels from '../util/rotateLabels';
+
+const updateAxes = (config, pc, position, axis, flags) => (
+  animationTime = null
+) => {
+  if (animationTime === null) {
+    animationTime = config.animationTime;
+  }
+
+  const g_data = pc.svg
+    .selectAll('.dimension')
+    .data(pc.getOrderedDimensionKeys());
+  // Enter
+  g_data
+    .enter()
+    .append('svg:g')
+    .attr('class', 'dimension')
+    .attr('transform', p => 'translate(' + position(p) + ')')
+    .style('opacity', 0)
+    .append('svg:g')
+    .attr('class', 'axis')
+    .attr('transform', 'translate(0,0)')
+    .each(function(d) {
+      const axisElement = select(this).call(
+        pc.applyAxisConfig(axis, config.dimensions[d])
+      );
+
+      axisElement
+        .selectAll('path')
+        .style('fill', 'none')
+        .style('stroke', '#222')
+        .style('shape-rendering', 'crispEdges');
+
+      axisElement
+        .selectAll('line')
+        .style('fill', 'none')
+        .style('stroke', '#222')
+        .style('shape-rendering', 'crispEdges');
+    })
+    .append('svg:text')
+    .attr('text-anchor', 'middle')
+    .attr('class', 'label')
+    .attr('x', 0)
+    .attr('y', 0)
+    .attr(
+      'transform',
+      'translate(0,-5) rotate(' + config.dimensionTitleRotation + ')'
+    )
+    .text(dimensionLabels(config))
+    .on('dblclick', flipAxisAndUpdatePCP(config, pc, axis))
+    .on('wheel', rotateLabels(config, pc));
+
+  // Update
+  g_data.attr('opacity', 0);
+  g_data
+    .select('.axis')
+    .transition()
+    .duration(animationTime)
+    .each(function(d) {
+      select(this).call(pc.applyAxisConfig(axis, config.dimensions[d]));
+    });
+  g_data
+    .select('.label')
+    .transition()
+    .duration(animationTime)
+    .text(dimensionLabels(config))
+    .attr(
+      'transform',
+      'translate(0,-5) rotate(' + config.dimensionTitleRotation + ')'
+    );
+
+  // Exit
+  g_data.exit().remove();
+
+  const g = pc.svg.selectAll('.dimension');
+  g.transition()
+    .duration(animationTime)
+    .attr('transform', p => 'translate(' + position(p) + ')')
+    .style('opacity', 1);
+
+  pc.svg
+    .selectAll('.axis')
+    .transition()
+    .duration(animationTime)
+    .each(function(d) {
+      select(this).call(pc.applyAxisConfig(axis, config.dimensions[d]));
+    });
+
+  if (flags.brushable) pc.brushable();
+  if (flags.reorderable) pc.reorderable();
+  if (pc.brushMode() !== 'None') {
+    const mode = pc.brushMode();
+    pc.brushMode('None');
+    pc.brushMode(mode);
+  }
+  return this;
+};
+
+export default updateAxes;

package/src/bindEvents.js

@@ -0,0 +1,60 @@
+// side effects for setters
+import sideEffects from './state/sideEffects';
+import getset from './util/getset';
+
+const d3_rebind = (target, source, method) =>
+  function() {
+    const value = method.apply(source, arguments);
+    return value === source ? target : value;
+  };
+
+const _rebind = (target, source, method) => {
+  target[method] = d3_rebind(target, source, source[method]);
+  return target;
+};
+
+const bindEvents = (
+  __,
+  ctx,
+  pc,
+  xscale,
+  flags,
+  brushedQueue,
+  markedQueue,
+  foregroundQueue,
+  events,
+  axis
+) => {
+  const side_effects = sideEffects(
+    __,
+    ctx,
+    pc,
+    xscale,
+    axis,
+    flags,
+    brushedQueue,
+    markedQueue,
+    foregroundQueue
+  );
+
+  // create getter/setters
+  getset(pc, __, events, side_effects);
+
+  // expose events
+  // getter/setter with event firing
+  _rebind(pc, events, 'on');
+
+  _rebind(
+    pc,
+    axis,
+    'ticks',
+    'orient',
+    'tickValues',
+    'tickSubdivide',
+    'tickSize',
+    'tickPadding',
+    'tickFormat'
+  );
+};
+
+export default bindEvents;

package/src/brush/1d/brushExtents.js

@@ -0,0 +1,73 @@
+import { select } from 'd3-selection';
+import { brushSelection } from 'd3-brush';
+
+import invertByScale from '../invertByScale';
+
+const brushExtents = (state, config, pc) => extents => {
+  const { brushes, brushNodes } = state;
+
+  if (typeof extents === 'undefined') {
+    return Object.keys(config.dimensions).reduce((acc, cur) => {
+      const brush = brushes[cur];
+      //todo: brush check
+      if (brush !== undefined && brushSelection(brushNodes[cur]) !== null) {
+        const raw = brushSelection(brushNodes[cur]);
+        const yScale = config.dimensions[cur].yscale;
+        const scaled = invertByScale(raw, yScale);
+
+        acc[cur] = {
+          extent: brush.extent(),
+          selection: {
+            raw,
+            scaled,
+          },
+        };
+      }
+
+      return acc;
+    }, {});
+  } else {
+    //first get all the brush selections
+    const brushSelections = {};
+    pc.g()
+      .selectAll('.brush')
+      .each(function(d) {
+        brushSelections[d] = select(this);
+      });
+
+    // loop over each dimension and update appropriately (if it was passed in through extents)
+    Object.keys(config.dimensions).forEach(d => {
+      if (extents[d] === undefined) {
+        return;
+      }
+
+      const brush = brushes[d];
+      if (brush !== undefined) {
+        const dim = config.dimensions[d];
+        const yExtent = extents[d].map(dim.yscale);
+
+        //update the extent
+        //sets the brushable extent to the specified array of points [[x0, y0], [x1, y1]]
+        //we actually don't need this since we are using brush.move below
+        //extents set the limits of the brush which means a user will not be able
+        //to move or drag the brush beyond the limits set by brush.extent
+        //brush.extent([[-15, yExtent[1]], [15, yExtent[0]]]);
+
+        //redraw the brush
+        //https://github.com/d3/d3-brush#brush_move
+        // For an x-brush, it must be defined as [x0, x1]; for a y-brush, it must be defined as [y0, y1].
+        brushSelections[d].call(brush).call(brush.move, yExtent.reverse());
+
+        //fire some events
+        // brush.event(brushSelections[d]);
+      }
+    });
+
+    //redraw the chart
+    pc.renderBrushed();
+
+    return pc;
+  }
+};
+
+export default brushExtents;

package/src/brush/1d/brushFor.js

@@ -0,0 +1,92 @@
+import { brushY, brushSelection } from 'd3-brush';
+import invertByScale from '../invertByScale';
+import selected from './selected';
+
+const brushUpdated = (config, pc, events, args) => newSelection => {
+  config.brushed = newSelection;
+  events.call('brush', pc, config.brushed, args);
+  pc.renderBrushed();
+};
+
+const brushFor = (state, config, pc, events, brushGroup) => (
+  axis,
+  _selector
+) => {
+  // handle hidden axes which will not be a property of dimensions
+  if (!config.dimensions.hasOwnProperty(axis)) {
+    return () => {};
+  }
+
+  const brushRangeMax =
+    config.dimensions[axis].type === 'string'
+      ? config.dimensions[axis].yscale.range()[
+          config.dimensions[axis].yscale.range().length - 1
+        ]
+      : config.dimensions[axis].yscale.range()[0];
+
+  const _brush = brushY(_selector).extent([[-15, 0], [15, brushRangeMax]]);
+
+  const convertBrushArguments = args => {
+    const args_array = Array.prototype.slice.call(args);
+    const axis = args_array[0];
+
+    const raw = brushSelection(args_array[2][0]) || [];
+
+    // handle hidden axes which will not have a yscale
+    let yscale = null;
+    if (config.dimensions.hasOwnProperty(axis)) {
+      yscale = config.dimensions[axis].yscale;
+    }
+
+    // ordinal scales do not have invert
+    const scaled = invertByScale(raw, yscale);
+
+    return {
+      axis: args_array[0],
+      node: args_array[2][0],
+      selection: {
+        raw,
+        scaled,
+      },
+    };
+  };
+
+  _brush
+    .on('start', function(event) {
+      if (event.sourceEvent !== null) {
+        events.call(
+          'brushstart',
+          pc,
+          config.brushed,
+          convertBrushArguments(arguments)
+        );
+        if (typeof event.sourceEvent.stopPropagation === 'function') {
+          event.sourceEvent.stopPropagation();
+        }
+      }
+    })
+    .on('brush', function() {
+      brushUpdated(
+        config,
+        pc,
+        events,
+        convertBrushArguments(arguments)
+      )(selected(state, config, brushGroup)());
+    })
+    .on('end', function() {
+      brushUpdated(config, pc, events)(selected(state, config, brushGroup)());
+      events.call(
+        'brushend',
+        pc,
+        config.brushed,
+        convertBrushArguments(arguments)
+      );
+    });
+
+  state.brushes[axis] = _brush;
+  state.brushNodes[axis] = _selector.node();
+
+  return _brush;
+};
+
+export default brushFor;

package/src/brush/1d/brushReset.js

@@ -0,0 +1,36 @@
+import { select } from 'd3-selection';
+
+const brushReset = (state, config, pc) => dimension => {
+  const { brushes } = state;
+
+  if (dimension === undefined) {
+    config.brushed = false;
+    if (pc.g() !== undefined && pc.g() !== null) {
+      pc.g()
+        .selectAll('.brush')
+        .each(function(d) {
+          if (brushes[d] !== undefined) {
+            select(this).call(brushes[d].move, null);
+          }
+        });
+      pc.renderBrushed();
+    }
+  } else {
+    config.brushed = false;
+    if (pc.g() !== undefined && pc.g() !== null) {
+      pc.g()
+        .selectAll('.brush')
+        .each(function(d) {
+          if (d !== dimension) return;
+          select(this).call(brushes[d].move, null);
+          if (typeof brushes[d].type === 'function') {
+            brushes[d].event(select(this));
+          }
+        });
+      pc.renderBrushed();
+    }
+  }
+  return this;
+};
+
+export default brushReset;