[v1.6.1] Hotfix for detaching Components

Components will now properly detach() from Groups and Tables before rendering. This bug would have manifested whenever a Component was removed from Group or Table before rendering, even implicitly (for example, adding a Component to a different Group when it is already in one, or changing its position within a Table).

For more information, see Pull Request #2590.

[v1.6.0] Interpolation, a New Formatter, and Key Interactions

This week's release includes many new features: a Short Scale Formatter for large values, the ability to set opacity on individual legend icons, an API for key release events, and several modes of interpolation for line and area plots.

In addition to these features there are multiple bugfixes for iPad, and clicks and drags now register correctly on desktop Safari. Labels are much improved, as they will now throw errors if given non-string input, and Pie Plot labels are accurate even when given bad data. Gridlines can be rendered without being attached to another component. Finally, deferredRendering() and autorangeMode() now work well together.

Features

Short Scale Formatter

Formatters.shortScale() was added to format large values using short scale suffixes.

The available suffixes include

• K - thousands
• M - millions
• B - billions
• T - trillions
• Q - quadrillions

Values greater than or equal to 10^18 will be displayed in scientific notation.

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

API for Key Release Event Handler

Interaction.Key now has an endpoint for listening for key release events:

• onKeyRelease(keyCode, callback) registers callback to be called when the key associated with keyCode is released.
• offKeyRelease(keyCode, callback) removes callback from the key associated with keycode when it is longer needed.

The callbacks will only be called if the key was pressed with the cursor inside the Component that the Interaction.Key is attached to.

Try it out: http://jsfiddle.net/ztsai/5c6djgco/4/

Symbol Opacity on Legends

Users can now set the opacity of the symbols on a Legend to be either a constant value or the result of a function.

/**
 * Gets the opacity of the symbols of the Legend.
 */
symbolOpacity(): (datum: any, index: number) => number;
/**
 * Sets the opacity of the symbols of the Legend.
 */
symbolOpacity(symbolOpacity: number | ((datum: any, index: number) => number)): Legend;

Thanks to @yqlu for this feature!

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

entitiesIn() on Plots.Scatter

Users can now query for Entities within a certain range or bounds on Plots.Scatter:

/**
 * Gets the Entities that intersect the Bounds.
 */
entitiesIn(bounds: Bounds): PlotEntity[];
/**
 * Gets the Entities that intersect the area defined by the ranges.
 */
entitiesIn(xRange: Range, yRange: Range): PlotEntity[];

Try it out: http://jsfiddle.net/bluong63/o3s4wst5/

Line Interpolation

The interpolation mode for Plots.Line and Plots.Area can be set via the new interpolator() endpoint.

/**
 * Gets the interpolation function associated with the plot.
 *
 * @return {string | (points: Array<[number, number]>) => string)}
 */
interpolator(): string | ((points: Array<[number, number]>) => string);
/**
 * Sets the interpolation function associated with the plot.
 *
 * @param {string | points: Array<[number, number]>) => string} interpolator Interpolation function
 * @return Plots.Line
 */
interpolator(interpolator: string | ((points: Array<[number, number]>) => string)): Plots.Line<X>;
interpolator(interpolator: "linear"): Line<X>;
interpolator(interpolator: "linear-closed"): Line<X>;
interpolator(interpolator: "step"): Line<X>;
interpolator(interpolator: "step-before"): Line<X>;
interpolator(interpolator: "step-after"): Line<X>;
interpolator(interpolator: "basis"): Line<X>;
interpolator(interpolator: "basis-open"): Line<X>;
interpolator(interpolator: "basis-closed"): Line<X>;
interpolator(interpolator: "bundle"): Line<X>;
interpolator(interpolator: "cardinal"): Line<X>;
interpolator(interpolator: "cardinal-open"): Line<X>;
interpolator(interpolator: "cardinal-closed"): Line<X>;
interpolator(interpolator: "monotone"): Line<X>;

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

Bugfixes

• deferredRendering() now works correctly when autorangeMode() is set (#2538).
• Labels are no longer drawn for invalid slice values on Plots.Pie (#2556).
• Label now throws an error if passed a non-string value for the text (#2574).
• Gridlines now render correctly if drawn on their own (#2532).
• Clicks/drags now register correctly on desktop Safari (#2454).

On iPad:

• Interactions.Click and Interactions.Drag no longer trigger through an overlay (#2452)
• Interactions.PanZoom no longer affects multiple Components (#2510).

[v1.5.2] Hotfix for XDragBoxLayer and YDragBoxLayer bug

XDragBoxLayer and YDragBoxLayer no longer error when destroy() is called.

[v1.5.1] Hotfix for SelectionBoxLayer bug

SelectionBoxLayer no longer throws an error if destroy() is called when no Scales are attached to the SelectionBoxLayer.

[v1.5.0] Movable Drag Boxes, entitiesAt() for Rectangles, and Data-backed SelectionBoxLayers

Features

Movable Drag Boxes

The box on DragBoxLayer can now be moved without resizing by clicking and dragging on the inside of the box. The functionality is accessed via the movable() API point on DragBoxLayer:

/**
 * Gets whether or not the drag box is movable.
 */
movable(): boolean;
/**
 * Sets whether or not the drag box is movable.
 *
 * @param {boolean} movable
 * @return {DragBoxLayer} The calling DragBoxLayer.
 */
movable(movable: boolean): DragBoxLayer;

A DragBoxLayer can be both movable() and resizable().

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

entitiesAt() on Plots.Rectangle

Mirroring the API endpoint on Plots.Bar, entitiesAt() has been added to Plots.Rectangle to extract all of the Entities at a given point.

The API is as below

/**
 * Gets the PlotEntities at a particular Point.
 *
 * @param {Point} point The point to query.
 * @returns {PlotEntity[]} The PlotEntities at the particular point
 */
entitiesAt(point: Point): PlotEntity[];

Try it out: http://jsfiddle.net/bluong63/9k6cxhmy/

Data-backed SelectionBoxLayers

The edges of the box in a SelectionBoxLayer can now be backed by a scale. This means that boxes can react to changes on the scale, re-rendering to place the box in correct location. In order to achieve this, you will need to input the scales to the SelectionBoxLayer.

You can set the scales or get them using the API below:

/**
 * Gets the x scale for this SelectionBoxLayer.
 */
xScale(): QuantitativeScale<number | { valueOf(): number; }>;
/**
 * Sets the x scale for this SelectionBoxLayer.
 *
 * @returns {SelectionBoxLayer} The calling SelectionBoxLayer.
 */
xScale(xScale: QuantitativeScale<number | { valueOf(): number; }>): SelectionBoxLayer;
/**
 * Gets the y scale for this SelectionBoxLayer.
 */
yScale(): QuantitativeScale<number | { valueOf(): number; }>;
/**
 * Sets the y scale for this SelectionBoxLayer.
 *
 * @returns {SelectionBoxLayer} The calling SelectionBoxLayer.
*/
yScale(yScale: QuantitativeScale<number | { valueOf(): number; }>): SelectionBoxLayer;

Also, it has been brought to attention that users will want to extract the data values that are backing the edges of the box (under the assumption that those edges are backed by a scale). Thus, endpoints have been created to derive the values of the edges in data space.

The API is as below:

/**
 * Gets the data values backing the left and right edges of the box.
 *
 * Returns an undefined array if the edges are not backed by a scale.
 */
xExtent(): (number | { valueOf(): number; })[];
/**
 * Gets the data values backing the top and bottom edges of the box.
 *
 * Returns an undefined array if the edges are not backed by a scale.
 */
yExtent(): (number | { valueOf(): number; })[];

Try it out: http://jsfiddle.net/bluong63/zajmnedm/

Performance improvements

30% speedup: Axes.Numeric rendering with approximated text size

An API point has been added to approximate text measurement on Axes.Numeric. When enabled with usesTextWidthApproximation(true), this feature causes Axes.Numeric to render slightly faster by assuming all number characters are the same width. This feature is particularly useful in cases where you need to load many charts on one page.

usesTextWidthApproximation() defaults to false.

Thanks to @PeterFaiman for this feature!

Try it out: http://jsfiddle.net/330wrfx1/

Bugfixes

• Labels that were previously cut off are now hidden on Plots.Bar and Plots.Pie (#1728).
• Tick generation logic has been improved on Scales.ModifiedLog so that the "Linear" portion of the Scale is less sparse.
  • Try it out: http://jsfiddle.net/ztsai/1zfz0tg2/3
• Plots.Pie's entitiesAt() method now returns the correct value for narrow slices (#2491).

[v1.4.0] Typescript 1.5, Plots.Waterfall, Plots.Pie label Formatter

Overview

Plottable now uses Typescript 1.5! Depending on your version of Typescript you may need to add or delete touch-events.d.ts from your project. Please review the upgrade instructions.

We're excited to introduce a new plot: Plots.Waterfall. New features and bug fixes have been added to Plots.Pie. These changes ensure that labels work as intended and give you the ability to format labels.

Typescript 1.5

Plottable has been upgraded to use Typescript 1.5. The only major change affecting Plottable users at this time is that Typescript 1.5 includes definitions for TouchEvent; consequently, Plottable no longer has a dependency on touch-events.d.ts.

: Depending on your current version of Typescript, you may need to add or remove touch-events.d.ts. Instructions are here.

Features

Plots.Waterfall

Plots.Waterfall has been added as an extension of Plots.Bar. This plot can be used to show how positive and negative deltas affect initial values.

Note that horizontal orientation is not an option for Plots.Waterfall, and .labelsEnabled() has not been implemented yet.

In addition to the traditional .x() and .y() accessors for plots, the following API points have been added:

• .total()/.total(total) - gets/sets an Accessor which will return true for each data point representing a total, and false for data points representing deltas. The function given to this endpoint must return a boolean.
• .connectorsEnabled()/.connectorsEnabled(enabled) - gets/sets whether connector lines, indicated below, should be shown.

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

Formatter for labels on Plots.Pie

The labels on Plots.Pie can now be formatted using a Formatter. The new API points on Plots.Pie are:

labelFormatter(): Formatter;
labelFormatter(formatter: Formatter): Plots.Pie;

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

Bugfixes

• autorangeMode() now works correctly on Plots.Line and Plots.Segment. Previously, using autorangeMode() would have resulted in larger domains than expected. Now there will be a tight domain around the data on the plot. (#2472).
• The function passed to Legend's symbol() method now uses the correct indices. This allows you to use the index of a legend entry to change the shape of its icon. (#2106).
• On Plots.Pie, labels will update when data changes. They are also removed when labelsEnabled() is set to false (#2483).

[v1.3.0] Enabling DragBox Layers

In this release, we've made further performance improvements, and have added a method that allows users to enable and disable the dragbox interaction.

We are now marking fields and methods as deprecated, though they will remain usable in the code base until our next major version bump (2.0). If you are using anything marked as deprecated, you can expect to see a warning in the console with this information. An example warning message is as follows:

Features

• DragBoxLayer.enabled() lets you easily turn the dragbox interaction on and off. Disabling will not hide the drag box, but will prevent user input from changing it until it is enabled again. Check it out: http://jsfiddle.net/jksm96wh/
  

Deprecations

• MILLISECONDS_IN_ONE_DAY is now deprecated due to the complexity of timezones, and the fact that the value it is supposed to represent is not a fixed quantity.
• Formatters.relativeDate() is deprecated as it is impossible to compute correctly without timezone data.
• Axis.ticklength() is deprecated, and has been renamed to Axis.innerTickLength().

Performance improvements

• We now cache CSS colors to improve rendering speed on pages with multiple Plottable plots. If you need to update Scales.Color, you can use the Plottable.Scales.Color.invalidateColorCache() method.

New API points

• Plottable.Scales.Color.invalidateColorCache() - Used for dynamic adjustment of CSS stylesheets prior to creating a new color scale.
• DragBoxLayer.enabled() - Used to enable / disable / freeze the DragBoxLayer without removing it from the page.
• Axis.innerTickLength() - Replacement method for tickLength(), is used for changing the length of tick marks on axes.

Thank you

• A very special thanks to @estas for the PR that renamed tickLength to innerTickLength. Congratulations are also in order, as this is the first external pull request that we've accepted. We're looking forward to seeing more!

[v1.2.0] PanZoom Interaction Improvements

As we mentioned in the previous release, the Plottable team is continuing to focus on making significant performance improvements, as well as developing new features. This week's release includes some improvements to Interactions.PanZoom.

Performance Improvements

58x speedup: Improved Responsiveness by Deferred Rendering

A deferred rendering option has been added to all Plots except Plots.Pie. When enabled with plot.deferredRendering(true), the Plot will respond to X and Y Scale updates more quickly, improving the performance of Interactions.PanZoom, particularly at larger data scales.

This speedup is accomplished by applying an SVG transformation in response to X and Y Scale updates, then re-rendering the Plot when no updates have been received for 500ms. Due to the transformation, parts of the Plot may appear distorted when zooming until the Plot re-renders.

deferredRendering() defaults to false.

8000 points on Plots.Scatter:

• Try toggling deferredRendering() on and off: http://jsfiddle.net/e4wg58ec/

Features

Zoom Limits on Interactions.PanZoom

It is now possible to set minimum and maximum limits on zooming on Interactions.PanZoom.

This feature works by setting minimum and maximum "extent" (the total size of the domain) for a given QuantitativeScale attached to the Interactions.PanZoom. When a minimum (or maximum) limit is reached on any Scale attached to the Interaction, the user will not be able to zoom in (or out) any further.

IMPORTANT: this feature only works with Scales.Linear and Scales.Time.

To get/set a minimum extent:

minDomainExtent<D>(qScale: QuantitativeScale): D;
minDomainExtent<D>(qScale: QuantitativeScale, minDomainExtent: D): Interactions.PanZoom;

To get/set a maximum extent:

maxDomainExtent<D>(qScale: QuantitativeScale): D;
maxDomainExtent<D>(qScale: QuantitativeScale, minDomainExtent: D): Interactions.PanZoom;

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

Bugfixes

• Plot.StackedBar now stacks correctly when using Scales.ModifiedLog (#2304).
• Click and Drag Interactions will no longer trigger through overlays on top of the <svg> containing Plottable (#2142).
  • Thanks to @raiju for the PR!

[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;

v1.0.0

1.0.0 Released!

The Plottable Team is proud to announce the 1.0.0 release of Plottable. Our detailed Upgrading to 1.0.0 Guide has complete instructions for updating your code from v0.54.0 to v1.0.0.

Updated website

Plottablejs.org has been updated to reflect the changes in v1.0.0. We have updated the Components section, added a new section to demonstrate Interactions, and revamped our tutorials to make getting up and running with v1.0.0 even easier.

Changes from v1.0.0-rc7 to v1.0.0

If you have been following along with our Release Candidates, this release is essentially identical to v1.0.0-rc7, except for the minor correction to the typings detailed below.

Drawer.selectionForIndex() now returns d3.Selection<any>

This change more accurately reflects the return type of selectionForIndex(), which returns a Selection with user-defined data bound to it.