Class pv.Layout.Horizon

Extends pv.Layout.
Implements a horizon layout, which is a variation of a single-series area chart where the area is folded into multiple bands. Color is used to encode band, allowing the size of the chart to be reduced significantly without impeding readability. This layout algorithm is based on the work of J. Heer, N. Kong and M. Agrawala in "Sizing the Horizon: The Effects of Chart Size and Layering on the Graphical Perception of Time Series Visualizations", CHI 2009.

This layout exports a single band mark prototype, which is intended to be used with an area mark. The band mark is contained in a panel which is replicated per band (and for negative/positive bands). For example, to create a simple horizon graph given an array of numbers:

vis.add(pv.Layout.Horizon)
    .bands(n)
  .band.add(pv.Area)
    .data(data)
    .left(function() this.index * 35)
    .height(function(d) d * 40);

The layout can be further customized by changing the number of bands, and toggling whether the negative bands are mirrored or offset. (See the above-referenced paper for guidance.)

The fillStyle of the area can be overridden, though typically it is easier to customize the layout's behavior through the custom backgroundStyle, positiveStyle and negativeStyle properties. By default, the background is white, positive bands are blue, and negative bands are red. For the most accurate presentation, use fully-opaque colors of equal intensity for the negative and positive bands.
Defined in: Horizon.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	pv.Layout.Horizon() Constructs a new, empty horizon layout.

Field Summary
Field Attributes	Field Name and Description
	backgroundStyle The background color.
	band The band prototype.
	bands The number of bands.
	defaults Default properties for horizon layouts.
	mode The horizon mode: offset, mirror, or color.
	negativeStyle The negative band color; if non-null, the interior of negative bands are filled with the specified color.
	positiveStyle The positive band color; if non-null, the interior of positive bands are filled with the specified color.

Fields borrowed from class pv.Panel:: canvas, children, overflow, transform
Fields borrowed from class pv.Bar:: fillStyle, height, lineWidth, strokeStyle, width
Fields borrowed from class pv.Mark:: bottom, childIndex, cursor, data, events, index, left, parent, proto, reverse, right, root, scale, title, top, type, visible

Methods borrowed from class pv.Panel:: add, anchor
Methods borrowed from class pv.Mark:: anchorTarget, def, event, extend, margin, mouse, render

Class Detail

pv.Layout.Horizon()

Constructs a new, empty horizon layout. Layouts are not typically constructed directly; instead, they are added to an existing panel via pv.Mark#add.

Field Detail

{pv.Color} backgroundStyle

The background color. The panel background is filled with the specified color, and the negative and positive bands are filled with an interpolated color between this color and the respective band color. The default value of this property is white. For accurate blending, this color should be fully opaque.

{pv.Mark} band

The band prototype. This prototype is intended to be used with an Area mark to render the horizon bands.

{number} bands

The number of bands. Must be at least one. The default value is two.

{pv.Layout.Horizon} defaults

Default properties for horizon layouts. By default, there are two bands, the mode is "offset", the background style is "white", the positive style is blue, negative style is red.

{string} mode

The horizon mode: offset, mirror, or color. The default is "offset".

{pv.Color} negativeStyle

The negative band color; if non-null, the interior of negative bands are filled with the specified color. The default value of this property is red. For accurate blending, this color should be fully opaque.

{pv.Color} positiveStyle

The positive band color; if non-null, the interior of positive bands are filled with the specified color. The default value of this property is blue. For accurate blending, this color should be fully opaque.

Classes

Class pv.Layout.Horizon