Rectangle Plot

var xScale = new Plottable.Scales.Category();
var yScale = new Plottable.Scales.Category();
var colorScale = new Plottable.Scales.InterpolatedColor();
colorScale.range(["#BDCEF0", "#5279C7"]);
var data = [
  { x: 1, y: 1, val: 2 }, { x: 1, y: 2, val: 1 }, { x: 1, y: 3, val: 3 },
  { x: 2, y: 1, val: 3 }, { x: 2, y: 2, val: 2 }, { x: 2, y: 3, val: 1 },
  { x: 3, y: 1, val: 1 }, { x: 3, y: 2, val: 3 }, { x: 3, y: 3, val: 2 }
]

var plot = new Plottable.Plots.Rectangle()
  .addDataset(new Plottable.Dataset(data))
  .x(function(d) { return d.x; }, xScale)
  .y(function(d) { return d.y; }, yScale)
  .attr("fill", function(d) { return d.val; }, colorScale)
  .renderTo("svg#example");

window.addEventListener("resize", function() {
  plot.redraw();
});

Inherits from Plots.XY

Public Methods

• .x2()/.x2(number|accessor)/.x2(number|accessor, scale)

  Gets/sets the value of x2 for the current plot. The first parameter can be a number or an Accessor function that returns a number. If the parameter scale is provided, results will be scaled.

  If x2 is set, the rectangle plot will assume that x values are treated as ranges from x to x2, as opposed as distinct items as described by x.

• .y2()/.y2(number|accessor)/.y2(number|accessor, scale)

  Gets/sets the value of y2 for the current plot. The first parameter can be a number or an Accessor function that returns a number. If the parameter scale is provided, results will be scaled.

  If y2 is set, the rectangle plot will assume that y values are treated as ranges from y to y2, as opposed as distinct items as described by y.