parallel coordinates

💡 This version of parallel coordinates adds hideAxis, evenScale options and follows vizart's color definitions, compared to syntagmatic's parallel coordinates

• Quick Reference
• API

Quick Reference

import { ParallelCoordinate } from 'vizart-path';
import 'vizart-path/dist/vizart-path.css';

const options = {
	chart: {
		margin: { left: 30, right: 30, top: 10, bottom: 30 }
	},
	plots: {
		hideAxis: ['name'],
	}
};

const _data = ...
const _chart = new ParallelCoordinate('#chart', options);
_chart.render(_data);

API

Default options:

{
    chart: {
        type: 'parallel_coordinates',
        margin: NoMargin
    },
    color: DefaultCategoricalColor,
    plots: {
        hideAxis:[],
        flipAxes: [],
        alpha: 0.25,
        bundlingStrength: 0.5,
        bundleDimension: null,
        composite: 'darken',
        smoothness: 0.0,
        showControlPoints: false,
        animationTime: 1100, // How long it takes to flip the axis when you double click
        brushMode: '1D-axes',
        brushPredicate: 'AND',
        colorDimension: null,
        mode: 'queue',
        dimensions: null,
        autoSortDimensions: 'asc',
        evenScale: null
    }
}

hideAxis

hide axes. must be an array. Axes that have more than 3000 distinct values will be hidden by default

evenScale

make every axis take the same scale. e.g. every numerical scale takes scale [0, 100]

colorDimension

dimension that color scale is made upon on.

flipAxes

flip axes

alpha

Change the opacity of the polylines, also the foreground context's globalAlpha.

bundlingStrength

bundling density, must be between [0, 1]. 0.5 by default.

bundleDimension

bundling a dimension

mode

Toggle the rendering mode. Currently there are two options:

"default" renders instantaneously, but is less responsive with more than ~2000 rows of data "queue" puts the data in a queue, and renders progressively. This way the user can interact with the chart during rendering.

dimensions

If dimensions is specified, sets the quantitative dimensions to be visualized and custom formatting. The format is an object of dimension objects. This will update the xscale domain, but will not trigger re-rendering of lines or axes.

var dimensions = {
	"name":
		{
			orient: 'right',
			type: 'string',
			tickPadding: 0,
			innerTickSize: 8
		},
	"protein": {type:"number"},
	"calcium": {type:"number"}};

If no dimensions are specified, then it returns the currently set dimensions.

Dimension attributes include:

• "title": String label for dimension
• "type": Possible values include: string, date and number. Detected types are automatically populated by detectDimensions using d3.parcoords.detectDimensionTypes.
• "ticks": Number of horizontal ticks to include on y axis
• "tickValues": Array of values to display for tick labels
• "orient": Orientation of ticks and tickValues(left or right of axis)
• "innerTickSize": Length of the horizontal ticks in between the top and bottom
• "outerTickSize": Length of the horizontal ticks at the top and bottom
• "tickPadding": Pixels to pad the tick title from the innerTickSize
• "yscale": Type of scale to use for the axis(log, linear, ordinal). Reference D3 Scales "index": Integer position for ordering dimensions on the x axis

smoothness

If double exists, polylines will be rendered with specified amount of curvature. NOTE: sylvester.js is a necessary dependency for this feature.

parcoords.smoothness(.2);

composite

Change foreground context's globalCompositeOperation

• source-over
• source-in
• source-out
• source-atop
• destination-over
• destination-in
• destination-out
• destination-atop
• lighter
• darker
• xor
• copy

animationTime

How long it takes to flip the axis when you double click. 1000 by default