@jrkasprzyk/parcoord-es 3.0.0

package/src/brush/strums/onDrag.js

@@ -0,0 +1,83 @@
+import { select } from 'd3-selection';
+import { drag } from 'd3-drag';
+import onDragEnd from './onDragEnd';
+
+const drawStrum = (
+  brushGroup,
+  state,
+  config,
+  pc,
+  events,
+  strum,
+  activePoint
+) => {
+  let _svg = pc.selection.select('svg').select('g#strums'),
+    id = strum.dims.i,
+    points = [strum.p1, strum.p2],
+    _line = _svg.selectAll('line#strum-' + id).data([strum]),
+    circles = _svg.selectAll('circle#strum-' + id).data(points),
+    _drag = drag();
+
+  _line
+    .enter()
+    .append('line')
+    .attr('id', 'strum-' + id)
+    .attr('class', 'strum');
+
+  _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', function(event, d) {
+      const i = points.indexOf(d) + 1;
+      strum['p' + i][0] = Math.min(Math.max(strum.minX + 1, event.x), strum.maxX);
+      strum['p' + i][1] = Math.min(Math.max(strum.minY, event.y), strum.maxY);
+      drawStrum(brushGroup, state, config, pc, events, strum, i - 1);
+    })
+    .on('end', onDragEnd(brushGroup, state, config, pc, events));
+
+  circles
+    .enter()
+    .append('circle')
+    .attr('id', 'strum-' + id)
+    .attr('class', 'strum');
+
+  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 strum = state.strums[state.strums.active];
+
+  // Make sure that the point is within the bounds
+  strum.p2[0] = Math.min(
+    Math.max(strum.minX + 1, event.x - config.margin.left),
+    strum.maxX
+  );
+  strum.p2[1] = Math.min(
+    Math.max(strum.minY, event.y - config.margin.top),
+    strum.maxY
+  );
+
+  drawStrum(brushGroup, state, config, pc, events, strum, 1);
+};
+
+export default onDrag;

package/src/brush/strums/onDragEnd.js

@@ -0,0 +1,20 @@
+import selected from './selected';
+import removeStrum from './removeStrum';
+
+const onDragEnd = (brushGroup, state, config, pc, events) => () => {
+  const strum = state.strums[state.strums.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 (strum && strum.p1[0] === strum.p2[0] && strum.p1[1] === strum.p2[1]) {
+    removeStrum(state, pc);
+  }
+
+  const brushed = selected(brushGroup, state, config);
+  state.strums.active = undefined;
+  config.brushed = brushed;
+  pc.renderBrushed();
+  events.call('brushend', pc, config.brushed);
+};
+
+export default onDragEnd;

package/src/brush/strums/onDragStart.js

@@ -0,0 +1,33 @@
+import { pointer } from 'd3-selection';
+import h from '../../util/height';
+import dimensionsForPoint from '../dimensionsForPoint';
+
+// First we need to determine between which two axes the sturm was started.
+// This will determine the freedom of movement, because a strum can
+// logically only happen between two axes, so no movement outside these axes
+// should be allowed.
+const onDragStart = (state, config, pc, xscale) => (event) => {
+  let 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 strum = {
+    p1: p,
+    dims: dims,
+    minX: xscale(dims.left),
+    maxX: xscale(dims.right),
+    minY: 0,
+    maxY: h(config),
+  };
+
+  // Make sure that the point is within the bounds
+  strum.p1[0] = Math.min(Math.max(strum.minX, p[0]), strum.maxX);
+  strum.p2 = strum.p1.slice();
+
+  state.strums[dims.i] = strum;
+  state.strums.active = dims.i;
+};
+
+export default onDragStart;

package/src/brush/strums/removeStrum.js

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

package/src/brush/strums/selected.js

@@ -0,0 +1,52 @@
+// test if point falls between lines
+const containmentTest = (strum, width) => p => {
+  const p1 = [strum.p1[0] - strum.minX, strum.p1[1] - strum.minX],
+    p2 = [strum.p2[0] - strum.minX, strum.p2[1] - strum.minX],
+    m1 = 1 - width / p1[0],
+    b1 = p1[1] * (1 - m1),
+    m2 = 1 - width / p2[0],
+    b2 = p2[1] * (1 - m2);
+
+  const x = p[0],
+    y = p[1],
+    y1 = m1 * x + b1,
+    y2 = m2 * x + b2;
+
+  return y > Math.min(y1, y2) && y < Math.max(y1, y2);
+};
+
+const crossesStrum = (state, config) => (d, id) => {
+  let strum = state.strums[id],
+    test = containmentTest(strum, state.strums.width(id)),
+    d1 = strum.dims.left,
+    d2 = strum.dims.right,
+    y1 = config.dimensions[d1].yscale,
+    y2 = config.dimensions[d2].yscale,
+    point = [y1(d[d1]) - strum.minX, y2(d[d2]) - strum.minX];
+  return test(point);
+};
+
+const selected = (brushGroup, state, config) => {
+  // Get the ids of the currently active strums.
+  const ids = Object.getOwnPropertyNames(state.strums).filter(d => !isNaN(d)),
+    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/strums/uninstall.js

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

package/src/index.js

@@ -0,0 +1,226 @@
+// misc
+import renderQueue from './util/renderQueue';
+import w from './util/width';
+
+// brush
+import install1DAxes from './brush/1d';
+import install1DAxesMulti from './brush/1d-multi';
+import install2DStrums from './brush/strums';
+import installAngularBrush from './brush/angular';
+
+// api
+import intersection from './api/intersection';
+import mergeParcoords from './api/mergeParcoords';
+import selected from './api/selected';
+import brushMode from './api/brushMode';
+import updateAxes from './api/updateAxes';
+import autoscale from './api/autoscale';
+import brushable from './api/brushable';
+import commonScale from './api/commonScale';
+import computeRealCentroids from './api/computeRealCentroids';
+import applyDimensionDefaults from './api/applyDimensionDefaults';
+import createAxes from './api/createAxes';
+import axisDots from './api/axisDots';
+import applyAxisConfig from './api/applyAxisConfig';
+import reorderable from './api/reorderable';
+import resize from './api/resize';
+import reorder from './api/reorder';
+import sortDimensions from './api/sortDimensions';
+import sortDimensionsByRowData from './api/sortDimensionsByRowData';
+import clear from './api/clear';
+import {
+  pathMark,
+  renderMarked,
+  renderMarkedDefault,
+  renderMarkedQueue,
+} from './api/renderMarked';
+import {
+  pathBrushed,
+  renderBrushed,
+  renderBrushedDefault,
+  renderBrushedQueue,
+} from './api/renderBrushed';
+import brushReset from './api/brushReset';
+import toType from './api/toType';
+import toString from './api/toString';
+import adjacentPairs from './api/adjacentPairs';
+import highlight from './api/highlight';
+import unhighlight from './api/unhighlight';
+import mark from './api/mark';
+import unmark from './api/unmark';
+import removeAxes from './api/removeAxes';
+import render from './api/render';
+import renderDefault, {
+  pathForeground,
+  renderDefaultQueue,
+} from './api/renderDefault';
+import toTypeCoerceNumbers from './api/toTypeCoerceNumbers';
+import detectDimensionTypes from './api/detectDimensionTypes';
+import getOrderedDimensionKeys from './api/getOrderedDimensionKeys';
+import interactive from './api/interactive';
+import shadows from './api/shadows';
+import init from './api/init';
+import flip from './api/flip';
+import detectDimensions from './api/detectDimensions';
+import scale from './api/scale';
+
+import { version } from '../package.json';
+import initState from './state';
+import bindEvents from './bindEvents';
+
+//css
+import './parallel-coordinates.css';
+
+const ParCoords = userConfig => {
+  const state = initState(userConfig);
+  const {
+    config,
+    events,
+    flags,
+    xscale,
+    dragging,
+    axis,
+    ctx,
+    canvas,
+    brush,
+  } = state;
+
+  const pc = init(config, canvas, ctx);
+
+  const position = d => {
+    if (xscale.range().length === 0) {
+      xscale.range([0, w(config)], 1);
+    }
+    return dragging[d] == null ? xscale(d) : dragging[d];
+  };
+
+  const brushedQueue = renderQueue(pathBrushed(config, ctx, position))
+    .rate(50)
+    .clear(() => pc.clear('brushed'));
+
+  const markedQueue = renderQueue(pathMark(config, ctx, position))
+    .rate(50)
+    .clear(() => pc.clear('marked'));
+
+  const foregroundQueue = renderQueue(pathForeground(config, ctx, position))
+    .rate(50)
+    .clear(function() {
+      pc.clear('foreground');
+      pc.clear('highlight');
+    });
+
+  bindEvents(
+    config,
+    ctx,
+    pc,
+    xscale,
+    flags,
+    brushedQueue,
+    markedQueue,
+    foregroundQueue,
+    events,
+    axis
+  );
+
+  // expose the state of the chart
+  pc.state = config;
+  pc.flags = flags;
+
+  pc.autoscale = autoscale(config, pc, xscale, ctx);
+  pc.scale = scale(config, pc);
+  pc.flip = flip(config);
+  pc.commonScale = commonScale(config, pc);
+  pc.detectDimensions = detectDimensions(pc);
+  // attempt to determine types of each dimension based on first row of data
+  pc.detectDimensionTypes = detectDimensionTypes;
+  pc.applyDimensionDefaults = applyDimensionDefaults(config, pc);
+  pc.getOrderedDimensionKeys = getOrderedDimensionKeys(config);
+
+  //Renders the polylines.
+  pc.render = render(config, pc, events);
+  pc.renderBrushed = renderBrushed(config, pc, events);
+  pc.renderMarked = renderMarked(config, pc, events);
+  pc.render.default = renderDefault(config, pc, ctx, position);
+  pc.render.queue = renderDefaultQueue(config, pc, foregroundQueue);
+  pc.renderBrushed.default = renderBrushedDefault(
+    config,
+    ctx,
+    position,
+    pc,
+    brush
+  );
+  pc.renderBrushed.queue = renderBrushedQueue(config, brush, brushedQueue);
+  pc.renderMarked.default = renderMarkedDefault(config, pc, ctx, position);
+  pc.renderMarked.queue = renderMarkedQueue(config, markedQueue);
+
+  pc.compute_real_centroids = computeRealCentroids(config, position);
+  pc.shadows = shadows(flags, pc);
+  pc.axisDots = axisDots(config, pc, position);
+  pc.clear = clear(config, pc, ctx, brush);
+  pc.createAxes = createAxes(config, pc, xscale, flags, axis);
+  pc.removeAxes = removeAxes(pc);
+  pc.updateAxes = updateAxes(config, pc, position, axis, flags);
+  pc.applyAxisConfig = applyAxisConfig;
+  pc.brushable = brushable(config, pc, flags);
+  pc.brushReset = brushReset(config, pc);
+  pc.selected = selected(config, pc);
+  pc.reorderable = reorderable(config, pc, xscale, position, dragging, flags);
+
+  // 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.
+  pc.reorder = reorder(config, pc, xscale);
+  pc.sortDimensionsByRowData = sortDimensionsByRowData(config);
+  pc.sortDimensions = sortDimensions(config, position);
+
+  // pairs of adjacent dimensions
+  pc.adjacent_pairs = adjacentPairs;
+  pc.interactive = interactive(flags);
+
+  // expose internal state
+  pc.xscale = xscale;
+  pc.ctx = ctx;
+  pc.canvas = canvas;
+  pc.g = () => pc._g;
+
+  // rescale for height, width and margins
+  // TODO currently assumes chart is brushable, and destroys old brushes
+  pc.resize = resize(config, pc, flags, events);
+
+  // highlight an array of data
+  pc.highlight = highlight(config, pc, canvas, events, ctx, position);
+  // clear highlighting
+  pc.unhighlight = unhighlight(config, pc, canvas);
+
+  // mark an array of data
+  pc.mark = mark(config, pc, canvas, events, ctx, position);
+  // clear marked data
+  pc.unmark = unmark(config, pc, canvas);
+
+  // calculate 2d intersection of line a->b with line c->d
+  // points are objects with x and y properties
+  pc.intersection = intersection;
+
+  // 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.)
+  pc.mergeParcoords = mergeParcoords(pc);
+  pc.brushModes = () => Object.getOwnPropertyNames(brush.modes);
+  pc.brushMode = brushMode(brush, config, pc);
+
+  // install brushes
+  install1DAxes(brush, config, pc, events);
+  install2DStrums(brush, config, pc, events, xscale);
+  installAngularBrush(brush, config, pc, events, xscale);
+  install1DAxesMulti(brush, config, pc, events);
+
+  pc.version = version;
+  // this descriptive text should live with other introspective methods
+  pc.toString = toString(config);
+  pc.toType = toType;
+  // try to coerce to number before returning type
+  pc.toTypeCoerceNumbers = toTypeCoerceNumbers;
+
+  return pc;
+};
+
+export default ParCoords;

package/src/parallel-coordinates.css

@@ -0,0 +1,61 @@
+.parcoords > svg, .parcoords > canvas {
+    font: 14px sans-serif;
+    position: absolute;
+}
+
+.parcoords > canvas {
+    pointer-events: none;
+}
+
+.parcoords text.label {
+    cursor: default;
+    fill: black;
+}
+
+.parcoords rect.background {
+    fill: transparent;
+}
+
+.parcoords rect.background:hover {
+    fill: rgba(120, 120, 120, 0.2);
+}
+
+.parcoords .resize rect {
+    fill: rgba(0, 0, 0, 0.1);
+}
+
+.parcoords rect.extent {
+    fill: rgba(255, 255, 255, 0.25);
+    stroke: rgba(0, 0, 0, 0.6);
+}
+
+.parcoords .axis line, .parcoords .axis path {
+    fill: none;
+    stroke: #222;
+    shape-rendering: crispEdges;
+}
+
+.parcoords canvas {
+    opacity: 1;
+    -moz-transition: opacity 0.3s;
+    -webkit-transition: opacity 0.3s;
+    -o-transition: opacity 0.3s;
+}
+
+.parcoords canvas.faded {
+    opacity: 0.25;
+}
+
+.parcoords canvas.dimmed {
+  opacity: 0.85;
+}
+
+.parcoords {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-color: white;
+}

package/src/state/defaultConfig.js

@@ -0,0 +1,36 @@
+const DefaultConfig = {
+  data: [],
+  highlighted: [],
+  marked: [],
+  dimensions: {},
+  dimensionTitleRotation: 0,
+  brushes: [],
+  brushed: false,
+  brushedColor: null,
+  alphaOnBrushed: 0.0,
+  lineWidth: 1.4,
+  highlightedLineWidth: 3,
+  mode: 'default',
+  markedLineWidth: 3,
+  markedShadowColor: '#ffffff',
+  markedShadowBlur: 10,
+  rate: 20,
+  width: 600,
+  height: 300,
+  margin: { top: 24, right: 20, bottom: 12, left: 20 },
+  nullValueSeparator: 'undefined', // set to "top" or "bottom"
+  nullValueSeparatorPadding: { top: 8, right: 0, bottom: 8, left: 0 },
+  color: '#069',
+  composite: 'source-over',
+  alpha: 0.7,
+  bundlingStrength: 0.5,
+  bundleDimension: null,
+  smoothness: 0.0,
+  showControlPoints: false,
+  hideAxis: [],
+  flipAxes: [],
+  animationTime: 1100, // How long it takes to flip the axis when you double click
+  rotateLabels: false,
+};
+
+export default DefaultConfig;

package/src/state/index.js

@@ -0,0 +1,86 @@
+import { axisLeft } from 'd3-axis';
+import { dispatch } from 'd3-dispatch';
+import { scalePoint } from 'd3-scale';
+
+import DefaultConfig from './defaultConfig';
+
+const initState = userConfig => {
+  const config = Object.assign({}, DefaultConfig, userConfig);
+
+  if (userConfig && userConfig.dimensionTitles) {
+    console.warn(
+      'dimensionTitles passed in userConfig is deprecated. Add title to dimension object.'
+    );
+    Object.entries(userConfig.dimensionTitles).forEach(([key, value]) => {
+      if (config.dimensions[key]) {
+        config.dimensions[key].title = config.dimensions[key].title
+          ? config.dimensions[key].title
+          : value;
+      } else {
+        config.dimensions[key] = {
+          title: value,
+        };
+      }
+    });
+  }
+
+  const eventTypes = [
+    'render',
+    'resize',
+    'highlight',
+    'mark',
+    'brush',
+    'brushend',
+    'brushstart',
+    'axesreorder',
+  ].concat(Object.keys(config));
+
+  const events = dispatch.apply(this, eventTypes),
+    flags = {
+      brushable: false,
+      reorderable: false,
+      axes: false,
+      interactive: false,
+      debug: false,
+    },
+    xscale = scalePoint(),
+    dragging = {},
+    axis = axisLeft().ticks(5),
+    ctx = {},
+    canvas = {};
+
+  const brush = {
+    modes: {
+      None: {
+        install: function(pc) {}, // Nothing to be done.
+        uninstall: function(pc) {}, // Nothing to be done.
+        selected: function() {
+          return [];
+        }, // Nothing to return
+        brushState: function() {
+          return {};
+        },
+      },
+    },
+    mode: 'None',
+    predicate: 'AND',
+    currentMode: function() {
+      return this.modes[this.mode];
+    },
+  };
+
+  return {
+    config,
+    events,
+    eventTypes,
+    flags,
+    xscale,
+    dragging,
+    axis,
+    ctx,
+    canvas,
+    brush,
+  };
+};
+
+export default initState;