Resizeable Drag Boxes, Bar Selection Improvements, Metadata, Time Axis Configuration

Good evening,

Tonight's release features improvements to bar selection, metadata in accessors, and configurable time axes.

Features

Resizeable Dragboxes

Drag boxes created with Interaction.DragBox, Interaction.XDragBox, and Interaction.YDragBox can be resized by dragging the sides or the corners of the box.
This feature can be enabled by calling resizeEnabled(true). Here is an example:
http://jsfiddle.net/2q1kojwn/

Bar Selection

• getBars() has been added to Bar Plots. The function takes in x and y pixel values or extents ({min: number, max: number}) and returns a D3.Selection consisting of any bars under the point/line/area. Unlike selectBar(), the bars will not receive the selected class.
• getAllBars() has been added to Bar Plots. When called, getAllBars() will return a D3.Selection that contains all the bars in that plot.

These two methods should make it easier to write Interaction callbacks.

Plot Metadata

Accessors passed to the project() call on Plots can now take up to four arguments:

(datum: any, index?: number, userMetadata?: any, plotMetadata?: Plot.PlotMetadata) => any;

The third argument, userMetadata, consists of metadata that has been added to a Dataset object; see the "Bugfixes" section for more details.
The fourth argument, plotMetadata, contains plot-specific information. Currently, it contains only datasetKey, the key associated with the Dataset being plotted. This feature can be used to differentiate datasets in a Plot:

var colorScale = new Plottable.Scale.Color("Category20b");
var dataset = new Plottable.Dataset(data);
var plot = new Plottable.Plot.Scatter(xScale, yScale)
      .addDataset(dataset)
      .project("fill", function (d, i, u, m) { return m.datasetKey; }, colorScale);

Time Axis Intervals

We've been meaning for a while to provide more control over the ticks on the multi-tiered Axis.Time.

axisConfigurations() can be used to get or set the current configurations of the axis. Currently, a TimeAxisConfiguration consists of an array of TimeAxisTierConfigurations, one for each tier of the Axis:

interface TimeAxisConfiguration {
  tierConfigurations: TimeAxisTierConfiguration[];
}

Currently, up to two tiers are supported. A TimeAxisTierConfiguration specifies how the Axis should generate ticks and how to format the corresponding labels. A TimeAxisTierConfiguration consists of an interval (a time unit), a step (the number of units), and a formatter:

interface TimeAxisTierConfiguration {
  interval: D3.Time.Interval;
  step: number;
  formatter: Formatter;
};

For example, the following TimeAxisTierConfiguration:

{interval: d3.time.hour, step: 3, formatter: Formatters.time("%I %p")}

will produce a tier with ticks every three hours, formatted as 12-hour time: 12 AM, 3AM, 6AM, etc.

Given an array of TimeAxisConfigurations, the Axis.Time will iterate through the array to find the first TimeAxisConfiguration until it finds one where the first generated tick will fit. It will then draw using that configuration, hiding any tick labels that do not fit.

For more on how ticks are generated please refer to D3 Time Scales.

Bugfixes

• Dataset metadata is now correctly passed to accessors (see "Plot Metadata", above). Thus, an alternative way of coloring a series in a plot is:

var dataset = new Plottable.Dataset(data, { color: red } );
var plot = new Plottable.Plot.Scatter(xScale, yScale)
      .addDataset(dataset)
      .project("fill", function (d, i, u, m) { return u.color; });

API Breaks

• BarHoverInteraction has been removed, as per the warning in v0.34.0's release notes.
• Formatters.time() has been moved to Formatters.multiTime(). Formatters.time() now pipes through to d3.time.format. For more on specifiers, please see https://github.com/mbostock/d3/wiki/Time-Formatting#format.
• 'selectBar()' has been removed from AbstractBarPlot and has been restructured into 'getBars()'.

Other notes

We're bringing back release songs.

Upgrade Instructions

If you were using Interaction.BarHover, you should instead attach an Interaction.Hover onto an Bar Plot like so:

var hoverInteraction = new Plottable.Interaction.Hover();
hoverInteraction.onHoverOver(hoverOverCallback);
hoverInteraction.onHoverOut(hoverOutCallback);
barPlot.hoverMode("point"); // or "line"; "point" by default
barPlot.registerInteraction(hoverInteraction);

• Replace all previous uses of Formatters.time() with Formatters.multiTime().
• The old behavior of 'selectBar()' can be replicated by using the new 'getBars()' API and then applying the selected class as appropriate:

var barToSelect = barPlot.getBars(x, y);
barToSelect.classed("selected", true);

Release Song

Balkanica