@jrkasprzyk/parcoord-es 3.0.0

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@jrkasprzyk/parcoord-es",
+  "version": "3.0.0",
+  "description": "ES6 module of Parallel Coordinates, based on d3 v7 modules",
+  "main": "dist/parcoords.js",
+  "module": "dist/parcoords.esm.js",
+  "jsnext:main": "dist/parcoords.esm.js",
+  "style": "dist/parcoords.css",
+  "scripts": {
+    "_prebuild": "eslint src test",
+    "build": "rollup -c",
+    "dev": "rollup -c rollup.config.dev.js -w",
+    "watch": "rollup -c -w",
+    "pretest": "npm run build",
+    "test:watch": "mocha --reporter min --watch",
+    "test": "mocha",
+    "test:cover": "babel-node ./node_modules/mocha/bin/_mocha",
+    "prepare": "npm test",
+    "format": "prettier --single-quote --trailing-comma es5 --write \"{src,__{tests,demo,dist}__}/**/*.{js,html}\""
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "dependencies": {
+    "d3-array": "^3.0.0",
+    "d3-axis": "^3.0.0",
+    "d3-brush": "^3.0.0",
+    "d3-dispatch": "^3.0.0",
+    "d3-drag": "^3.0.0",
+    "d3-interpolate": "^3.0.0",
+    "d3-scale": "^4.0.0",
+    "d3-selection": "^3.0.0",
+    "d3-shape": "^3.0.0",
+    "d3-transition": "^3.0.0",
+    "requestanimationframe": "0.0.23",
+    "sylvester-es6": "0.0.2"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.25.0",
+    "@babel/core": "^7.25.0",
+    "@babel/eslint-parser": "^7.25.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.0",
+    "@babel/preset-env": "^7.25.0",
+    "@babel/register": "^7.25.0",
+    "@rollup/plugin-babel": "^6.0.0",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "eslint": "^8.57.0",
+    "mocha": "^11.0.0",
+    "prettier": "1.13.5",
+    "rollup": "^4.20.0",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-serve": "^3.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jrkasprzyk/parcoords-es.git"
+  },
+  "keywords": [
+    "es6",
+    "d3",
+    "v4",
+    "ParCoords",
+    "visualization",
+    "parallel coordinates"
+  ],
+  "author": {
+    "name": "Xing Yun"
+  },
+  "contributors": [
+    {
+      "name": "Joseph Kasprzyk"
+    }
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "overrides": {
+    "diff": "^8.0.3",
+    "serialize-javascript": "^7.0.5"
+  },
+  "bugs": {
+    "url": "https://github.com/jrkasprzyk/parcoords-es/issues"
+  }
+}

package/src/api/adjacentPairs.js

@@ -0,0 +1,10 @@
+// pairs of adjacent dimensions
+const adjacentPairs = arr => {
+  let ret = [];
+  for (let i = 0; i < arr.length - 1; i++) {
+    ret.push([arr[i], arr[i + 1]]);
+  }
+  return ret;
+};
+
+export default adjacentPairs;

package/src/api/applyAxisConfig.js

@@ -0,0 +1,35 @@
+import { axisBottom, axisLeft, axisRight, axisTop } from 'd3-axis';
+
+const applyAxisConfig = (axis, dimension) => {
+  let axisCfg;
+
+  switch (dimension.orient) {
+    case 'left':
+      axisCfg = axisLeft(dimension.yscale);
+      break;
+    case 'right':
+      axisCfg = axisRight(dimension.yscale);
+      break;
+    case 'top':
+      axisCfg = axisTop(dimension.yscale);
+      break;
+    case 'bottom':
+      axisCfg = axisBottom(dimension.yscale);
+      break;
+    default:
+      axisCfg = axisLeft(dimension.yscale);
+      break;
+  }
+
+  axisCfg
+    .ticks(dimension.ticks)
+    .tickValues(dimension.tickValues)
+    .tickSizeInner(dimension.innerTickSize)
+    .tickSizeOuter(dimension.outerTickSize)
+    .tickPadding(dimension.tickPadding)
+    .tickFormat(dimension.tickFormat);
+
+  return axisCfg;
+};
+
+export default applyAxisConfig;

package/src/api/applyDimensionDefaults.js

@@ -0,0 +1,25 @@
+const isValid = d => d !== null && d !== undefined;
+
+const applyDimensionDefaults = (config, pc) =>
+  function(dims) {
+    const types = pc.detectDimensionTypes(config.data);
+    dims = dims ? dims : Object.keys(types);
+
+    return dims.reduce((acc, cur, i) => {
+      const k = config.dimensions[cur] ? config.dimensions[cur] : {};
+      acc[cur] = {
+        ...k,
+        orient: isValid(k.orient) ? k.orient : 'left',
+        ticks: isValid(k.ticks) ? k.ticks : 5,
+        innerTickSize: isValid(k.innerTickSize) ? k.innerTickSize : 6,
+        outerTickSize: isValid(k.outerTickSize) ? k.outerTickSize : 0,
+        tickPadding: isValid(k.tickPadding) ? k.tickPadding : 3,
+        type: isValid(k.type) ? k.type : types[cur],
+        index: isValid(k.index) ? k.index : i,
+      };
+
+      return acc;
+    }, {});
+  };
+
+export default applyDimensionDefaults;

package/src/api/autoscale.js

@@ -0,0 +1,133 @@
+import { scaleLinear, scaleOrdinal, scalePoint, scaleTime } from 'd3-scale';
+import { extent } from 'd3-array';
+
+import getRange from '../util/getRange';
+import w from '../util/width';
+import h from '../util/height';
+
+const autoscale = (config, pc, xscale, ctx) =>
+  function() {
+    // yscale
+    const defaultScales = {
+      date: function(k) {
+        let _extent = extent(config.data, d => (d[k] ? d[k].getTime() : null));
+        // special case if single value
+        if (_extent[0] === _extent[1]) {
+          return scalePoint()
+            .domain(_extent)
+            .range(getRange(config));
+        }
+        if (config.flipAxes.includes(k)) {
+          _extent = _extent.map(val => tempDate.unshift(val));
+        }
+        return scaleTime()
+          .domain(_extent)
+          .range(getRange(config));
+      },
+      number: function(k) {
+        let _extent = extent(config.data, d => +d[k]);
+        // special case if single value
+        if (_extent[0] === _extent[1]) {
+          return scalePoint()
+            .domain(_extent)
+            .range(getRange(config));
+        }
+        if (config.flipAxes.includes(k)) {
+          _extent = _extent.map(val => tempDate.unshift(val));
+        }
+        return scaleLinear()
+          .domain(_extent)
+          .range(getRange(config));
+      },
+      string: function(k) {
+        let counts = {},
+          domain = [];
+        // Let's get the count for each value so that we can sort the domain based
+        // on the number of items for each value.
+        config.data.map(p => {
+          if (p[k] === undefined && config.nullValueSeparator !== 'undefined') {
+            return null; // null values will be drawn beyond the horizontal null value separator!
+          }
+          if (counts[p[k]] === undefined) {
+            counts[p[k]] = 1;
+          } else {
+            counts[p[k]] = counts[p[k]] + 1;
+          }
+        });
+        if (config.flipAxes.includes(k)) {
+          domain = Object.getOwnPropertyNames(counts).sort();
+        } else {
+          let tempArr = Object.getOwnPropertyNames(counts).sort();
+          for (let i = 0; i < Object.getOwnPropertyNames(counts).length; i++) {
+            domain.push(tempArr.pop());
+          }
+        }
+
+        //need to create an ordinal scale for categorical data
+        let categoricalRange = [];
+        if (domain.length === 1) {
+          //edge case
+          domain = [' ', domain[0], ' '];
+        }
+        let addBy = getRange(config)[0] / (domain.length - 1);
+        for (let j = 0; j < domain.length; j++) {
+          if (categoricalRange.length === 0) {
+            categoricalRange.push(0);
+            continue;
+          }
+          categoricalRange.push(categoricalRange[j - 1] + addBy);
+        }
+        return scaleOrdinal()
+          .domain(domain)
+          .range(categoricalRange);
+      },
+    };
+    Object.keys(config.dimensions).forEach(function(k) {
+      if (
+        config.dimensions[k].yscale === undefined ||
+        config.dimensions[k].yscale === null
+      ) {
+        config.dimensions[k].yscale = defaultScales[config.dimensions[k].type](
+          k
+        );
+      }
+    });
+
+    // xscale
+    // add padding for d3 >= v4 default 0.2
+    xscale.range([0, w(config)]).padding(0.2);
+
+    // Retina display, etc.
+    const devicePixelRatio = window.devicePixelRatio || 1;
+
+    // canvas sizes
+    pc.selection
+      .selectAll('canvas')
+      .style('margin-top', config.margin.top + 'px')
+      .style('margin-left', config.margin.left + 'px')
+      .style('width', w(config) + 2 + 'px')
+      .style('height', h(config) + 2 + 'px')
+      .attr('width', (w(config) + 2) * devicePixelRatio)
+      .attr('height', (h(config) + 2) * devicePixelRatio);
+    // default styles, needs to be set when canvas width changes
+    ctx.foreground.strokeStyle = config.color;
+    ctx.foreground.lineWidth = config.lineWidth;
+    ctx.foreground.globalCompositeOperation = config.composite;
+    ctx.foreground.globalAlpha = config.alpha;
+    ctx.foreground.scale(devicePixelRatio, devicePixelRatio);
+    ctx.brushed.strokeStyle = config.brushedColor;
+    ctx.brushed.lineWidth = config.lineWidth;
+    ctx.brushed.globalCompositeOperation = config.composite;
+    ctx.brushed.globalAlpha = config.alpha;
+    ctx.brushed.scale(devicePixelRatio, devicePixelRatio);
+    ctx.highlight.lineWidth = config.highlightedLineWidth;
+    ctx.highlight.scale(devicePixelRatio, devicePixelRatio);
+    ctx.marked.lineWidth = config.markedLineWidth;
+    ctx.marked.shadowColor = config.markedShadowColor;
+    ctx.marked.shadowBlur = config.markedShadowBlur;
+    ctx.marked.scale(devicePixelRatio, devicePixelRatio);
+
+    return this;
+  };
+
+export default autoscale;

package/src/api/axisDots.js

@@ -0,0 +1,27 @@
+import { min } from 'd3-array';
+
+//draw dots with radius r on the axis line where data intersects
+const axisDots = (config, pc, position) => _r => {
+  const r = _r || 0.1;
+  const ctx = pc.ctx.dots;
+  const startAngle = 0;
+  const endAngle = 2 * Math.PI;
+  ctx.globalAlpha = min([1 / Math.pow(config.data.length, 1 / 2), 1]);
+  config.data.forEach(d => {
+    Object.entries(config.dimensions).forEach(([key], i) => {
+      ctx.beginPath();
+      ctx.arc(
+        position(key),
+        config.dimensions[key].yscale(d[key]),
+        r,
+        startAngle,
+        endAngle
+      );
+      ctx.stroke();
+      ctx.fill();
+    });
+  });
+  return this;
+};
+
+export default axisDots;

package/src/api/brushMode.js

@@ -0,0 +1,50 @@
+const brushPredicate = (brushGroup, config, pc) => (predicate = null) => {
+  if (predicate === null) {
+    return brushGroup.predicate;
+  }
+
+  predicate = String(predicate).toUpperCase();
+  if (predicate !== 'AND' && predicate !== 'OR') {
+    throw new Error('Invalid predicate ' + predicate);
+  }
+
+  brushGroup.predicate = predicate;
+  config.brushed = brushGroup.currentMode().selected();
+  pc.renderBrushed();
+  return pc;
+};
+
+const brushMode = (brushGroup, config, pc) => (mode = null) => {
+  if (mode === null) {
+    return brushGroup.mode;
+  }
+
+  if (pc.brushModes().indexOf(mode) === -1) {
+    throw new Error('pc.brushmode: Unsupported brush mode: ' + mode);
+  }
+
+  // Make sure that we don't trigger unnecessary events by checking if the mode
+  // actually changes.
+  if (mode !== brushGroup.mode) {
+    // When changing brush modes, the first thing we need to do is clearing any
+    // brushes from the current mode, if any.
+    if (brushGroup.mode !== 'None') {
+      pc.brushReset();
+    }
+
+    // Next, we need to 'uninstall' the current brushMode.
+    brushGroup.modes[brushGroup.mode].uninstall(pc);
+    // Finally, we can install the requested one.
+    brushGroup.mode = mode;
+    brushGroup.modes[brushGroup.mode].install();
+    if (mode === 'None') {
+      delete pc.brushPredicate;
+    } else {
+      pc.brushPredicate = brushPredicate(brushGroup, config, pc);
+    }
+  }
+
+  return pc;
+};
+
+export default brushMode;

package/src/api/brushReset.js

@@ -0,0 +1,34 @@
+import { select } from 'd3-selection';
+
+const brushReset = (config, pc) =>
+  function(dimension) {
+    const brushesToKeep = [];
+    for (let j = 0; j < config.brushes.length; j++) {
+      if (config.brushes[j].data !== dimension) {
+        brushesToKeep.push(config.brushes[j]);
+      }
+    }
+
+    config.brushes = brushesToKeep;
+    config.brushed = false;
+
+    if (pc.g() !== undefined) {
+      const nodes = pc
+        .g()
+        .selectAll('.brush')
+        .nodes();
+      for (let i = 0; i < nodes.length; i++) {
+        if (nodes[i].__data__ === dimension) {
+          // remove all dummy brushes for this axis or the real brush
+          select(select(nodes[i]).nodes()[0].parentNode)
+            .selectAll('.dummy')
+            .remove();
+          config.dimensions[dimension].brush.move(select(nodes[i], null));
+        }
+      }
+    }
+
+    return this;
+  };
+
+export default brushReset;

package/src/api/brushable.js

@@ -0,0 +1,81 @@
+import { brushSelection, brushY } from 'd3-brush';
+import { select } from 'd3-selection';
+
+const brushable = (config, pc, flags) =>
+  function() {
+    if (!pc.g()) {
+      pc.createAxes();
+    }
+
+    const g = pc.g();
+
+    // Add and store a brush for each axis.
+    g.append('svg:g')
+      .attr('class', 'brush')
+      .each(function(d) {
+        if (config.dimensions[d] !== undefined) {
+          config.dimensions[d]['brush'] = brushY(select(this)).extent([
+            [-15, 0],
+            [15, config.dimensions[d].yscale.range()[0]],
+          ]);
+          select(this).call(
+            config.dimensions[d]['brush']
+              .on('start', function(event) {
+                if (event.sourceEvent !== null && !event.sourceEvent.ctrlKey) {
+                  pc.brushReset();
+                }
+              })
+              .on('brush', function(event) {
+                if (!event.sourceEvent.ctrlKey) {
+                  pc.brush();
+                }
+              })
+              .on('end', function(event) {
+                // save brush selection is ctrl key is held
+                // store important brush information and
+                // the html element of the selection,
+                // to make a dummy selection element
+                if (event.sourceEvent.ctrlKey) {
+                  let html = select(this)
+                    .select('.selection')
+                    .nodes()[0].outerHTML;
+                  html = html.replace(
+                    'class="selection"',
+                    'class="selection dummy' +
+                      ' selection-' +
+                      config.brushes.length +
+                      '"'
+                  );
+                  let dat = select(this).nodes()[0].__data__;
+                  let brush = {
+                    id: config.brushes.length,
+                    extent: brushSelection(this),
+                    html: html,
+                    data: dat,
+                  };
+                  config.brushes.push(brush);
+                  select(select(this).nodes()[0].parentNode)
+                    .select('.axis')
+                    .nodes()[0].outerHTML += html;
+                  pc.brush();
+                  config.dimensions[d].brush.move(select(this, null));
+                  select(this)
+                    .select('.selection')
+                    .attr('style', 'display:none');
+                  pc.brushable();
+                } else {
+                  pc.brush();
+                }
+              })
+          );
+          select(this).on('dblclick', function() {
+            pc.brushReset(d);
+          });
+        }
+      });
+
+    flags.brushable = true;
+    return this;
+  };
+
+export default brushable;

package/src/api/clear.js

@@ -0,0 +1,21 @@
+import isBrushed from '../util/isBrushed';
+import w from '../util/width';
+import h from '../util/height';
+
+const clear = (config, pc, ctx, brushGroup) =>
+  function(layer) {
+    ctx[layer].clearRect(0, 0, w(config) + 2, h(config) + 2);
+
+    // This will make sure that the foreground items are transparent
+    // without the need for changing the opacity style of the foreground canvas
+    // as this would stop the css styling from working
+    if (layer === 'brushed' && isBrushed(config, brushGroup)) {
+      ctx.brushed.fillStyle = pc.selection.style('background-color');
+      ctx.brushed.globalAlpha = 1 - config.alphaOnBrushed;
+      ctx.brushed.fillRect(0, 0, w(config) + 2, h(config) + 2);
+      ctx.brushed.globalAlpha = config.alpha;
+    }
+    return this;
+  };
+
+export default clear;

package/src/api/commonScale.js

@@ -0,0 +1,45 @@
+import { extent } from 'd3-array';
+
+const commonScale = (config, pc) =>
+  function(global, type) {
+    const t = type || 'number';
+    if (typeof global === 'undefined') {
+      global = true;
+    }
+
+    // try to autodetect dimensions and create scales
+    if (!Object.keys(config.dimensions).length) {
+      pc.detectDimensions();
+    }
+    pc.autoscale();
+
+    // scales of the same type
+    const scales = Object.keys(config.dimensions).filter(
+      p => config.dimensions[p].type == t
+    );
+
+    if (global) {
+      let _extent = extent(
+        scales
+          .map(d => config.dimensions[d].yscale.domain())
+          .reduce((cur, acc) => cur.concat(acc))
+      );
+
+      scales.forEach(d => {
+        config.dimensions[d].yscale.domain(_extent);
+      });
+    } else {
+      scales.forEach(d => {
+        config.dimensions[d].yscale.domain(extent(config.data, d => +d[k]));
+      });
+    }
+
+    // update centroids
+    if (config.bundleDimension !== null) {
+      pc.bundleDimension(config.bundleDimension);
+    }
+
+    return this;
+  };
+
+export default commonScale;

package/src/api/computeRealCentroids.js

@@ -0,0 +1,8 @@
+const computeRealCentroids = (config, position) => row =>
+  Object.keys(config.dimensions).map(d => {
+    const x = position(d);
+    const y = config.dimensions[d].yscale(row[d]);
+    return [x, y];
+  });
+
+export default computeRealCentroids;

package/src/api/createAxes.js

@@ -0,0 +1,101 @@
+import { select } from 'd3-selection';
+
+import dimensionLabels from '../util/dimensionLabels';
+import flipAxisAndUpdatePCP from '../util/flipAxisAndUpdatePCP';
+import rotateLabels from '../util/rotateLabels';
+
+import w from '../util/width';
+import h from '../util/height';
+
+/**
+ * Create static SVG axes with dimension names, ticks, and labels.
+ *
+ * @param config
+ * @param pc
+ * @param xscale
+ * @param flags
+ * @param axis
+ * @returns {Function}
+ */
+const createAxes = (config, pc, xscale, flags, axis) =>
+  function() {
+    if (pc.g() !== undefined) {
+      pc.removeAxes();
+    }
+    // Add a group element for each dimension.
+    pc._g = pc.svg
+      .selectAll('.dimension')
+      .data(pc.getOrderedDimensionKeys(), function(d) {
+        return d;
+      })
+      .enter()
+      .append('svg:g')
+      .attr('class', 'dimension')
+      .attr('transform', function(d) {
+        return 'translate(' + xscale(d) + ')';
+      });
+    // Add an axis and title.
+    pc._g
+      .append('svg:g')
+      .attr('class', 'axis')
+      .attr('transform', 'translate(0,0)')
+      .each(function(d) {
+        let 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('y', 0)
+      .attr(
+        'transform',
+        'translate(0,-5) rotate(' + config.dimensionTitleRotation + ')'
+      )
+      .attr('x', 0)
+      .attr('class', 'label')
+      .text(dimensionLabels(config))
+      .on('dblclick', flipAxisAndUpdatePCP(config, pc, axis))
+      .on('wheel', rotateLabels(config, pc));
+
+    if (config.nullValueSeparator === 'top') {
+      pc.svg
+        .append('line')
+        .attr('x1', 0)
+        .attr('y1', 1 + config.nullValueSeparatorPadding.top)
+        .attr('x2', w(config))
+        .attr('y2', 1 + config.nullValueSeparatorPadding.top)
+        .attr('stroke-width', 1)
+        .attr('stroke', '#777')
+        .attr('fill', 'none')
+        .attr('shape-rendering', 'crispEdges');
+    } else if (config.nullValueSeparator === 'bottom') {
+      pc.svg
+        .append('line')
+        .attr('x1', 0)
+        .attr('y1', h(config) + 1 - config.nullValueSeparatorPadding.bottom)
+        .attr('x2', w(config))
+        .attr('y2', h(config) + 1 - config.nullValueSeparatorPadding.bottom)
+        .attr('stroke-width', 1)
+        .attr('stroke', '#777')
+        .attr('fill', 'none')
+        .attr('shape-rendering', 'crispEdges');
+    }
+
+    flags.axes = true;
+    return this;
+  };
+
+export default createAxes;

package/src/api/detectDimensionTypes.js

@@ -0,0 +1,12 @@
+import toTypeCoerceNumbers from './toTypeCoerceNumbers';
+
+// attempt to determine types of each dimension based on first row of data
+const detectDimensionTypes = data =>
+  Object.keys(data[0]).reduce((acc, cur) => {
+    const key = isNaN(Number(cur)) ? cur : parseInt(cur);
+    acc[key] = toTypeCoerceNumbers(data[0][cur]);
+
+    return acc;
+  }, {});
+
+export default detectDimensionTypes;