[v1.1.0] Performance, Plots.Pie upgrades, and Interaction upgrades

Now that we've released 1.0.0, the Plottable team is focusing on making significant performance improvements, as well as developing new features. This release features new methods for Plots.Pie, the ability to disable Interactions, and multiple Scales on Interactions.PanZoom. Performance improvements include:

• 8x speedup on Plots.StackedBar and Plots.StackedArea
• 33x speedup on Interactions.PanZoom with Plots.Bar
• 440x speedup on entityNearest()

Performance Improvements

8x speedup: Stacking algorithm

The performance of Plots.StackedBar and Plots.StackedArea have been improved.

10 Datasets x 5,000 points on Plots.StackedBar (50,000 bars total):

• Before: 11,793 ms http://jsfiddle.net/u0s7k6sw/ (WARNING: may lag severely!)
• After: 1,378 ms http://jsfiddle.net/g01ypa83/

33x speedup: PanZoom on Plots.Bar

The auto-width calculation logic on Plots.Bar has been improved, resulting in improved performance when using Plots.Bar with Interactions.PanZoom.

10 Datasets with 50 bars per Dataset (500 bars total):

• Before: 660 ms http://jsfiddle.net/82anwejh/
• After: 20 ms http://jsfiddle.net/L6rv0cxs/

440x speedup: Closest point calculation

The performance of entityNearest() has been improved.

1,471 points on Plots.Scatter:

• Before: 660ms http://jsfiddle.net/hga6nsn6/
• After: 1.5ms http://jsfiddle.net/8324o3os/

Features

entitiesAt() on Plots.Pie e.g. Pie Chart Selection

.entitiesAt() is now supported on Plots.Pie for retrieving Entities under a Point. This gives the ability to select slices of a pie chart.

Try it out: http://jsfiddle.net/9jj512p3/

Example usage:

clickInteraction.onClick((p: Point) {
  var entities = piePlot.entitiesAt(p);
  if (entities.length > 0) {
    var slice = entities[0];
    console.log(slice.datum);
    // anything else based on the contents of the Entity
  }
});

.labelsEnabled() on Plots.Pie.

Plots.Pie can now display labels on each slice. If the label does not fit within its associated slice it will not be shown.

Try it out: http://jsfiddle.net/jmagzh8n/

Signature:

/**
 * Get whether slice labels are enabled.
 *
 * @returns {boolean} Whether slices should display labels or not.
 */
public labelsEnabled(): boolean;
/**
 * Sets whether labels are enabled.
 *
 * @param {boolean} labelsEnabled
 * @returns {Pie} The calling Pie Plot.
 */
public labelsEnabled(enabled: boolean): Plots.Pie;

Plots.Segment

Plots.Segment draws line segments based on data. It has four property setters:

• .x()
• .x2()
• .y()
• .y2()

The x()/x2() properties use the same Scale, as do the y()/y2() properties. If x2() is not provided, it is assumed to be the same as x(); Similarly, if y2() is not provided it is assumed to be the same as y().

Try it out: http://jsfiddle.net/7agnnvzw/

Disabling and Re-enabling Interactions

The enabled() API point has been added to Interactions:

/**
 * Gets whether this Interaction is enabled.
 */
public enabled(): boolean;
/**
 * Enables or disables this Interaction.
 */
public enabled(enabled: boolean): Interaction;

enabled(false) can be used to temporarily disable an Interaction, and enabled(true) to re-enable it. One application of this API point is to combine Interactions that would otherwise have conflicting inputs.

Try it out: http://jsfiddle.net/0dvhgsw6/

Interactions.PanZoom with multiple Scales:

Interactions.PanZoom now supports multiple x-Scales and y-Scales.

Try it out: http://jsfiddle.net/bluong63/2nqk1smq/

Scales can be added/removed with the following methods:

public addXScale(xScale: QuantitativeScale<any>);
public removeXScale(xScale: QuantitativeScale<any>);

public addYScale(yScale: QuantitativeScale<any>);
public removeYScale(yScale: QuantitativeScale<any>);

In addition, the x-Scales and y-Scales can be set or retrieved en masse with the following methods:

/**
 * Gets the x scales for this PanZoom Interaction.
 */
public xScales(): QuantitativeScale<any>[];
/**
 * Sets the x scales for this PanZoom Interaction.
 * 
 * @returns {Interactions.PanZoom} The calling PanZoom Interaction.
 */
public xScales(xScales: QuantitativeScale<any>[]): Interactions.PanZoom;

/**
 * Gets the y scales for this PanZoom Interaction.
 */
public yScales(): QuantitativeScale<any>[];
/**
 * Sets the y scales for this PanZoom Interaction.
 * 
 * @returns {Interactions.PanZoom} The calling PanZoom Interaction.
 */
public yScales(yScales: QuantitativeScale<any>[]): Interactions.PanZoom;