function makeData() {
  "use strict";
  return [makeRandomData(30), makeRandomData(30)];
}

function run(svg, data, Plottable) {
  "use strict";

  var xScaleSquare = new Plottable.Scales.Linear();
  var xScaleTriangle = new Plottable.Scales.ModifiedLog();
  var yScale = new Plottable.Scales.Linear();
  var xAxisSquare = new Plottable.Axes.Numeric(xScaleSquare, "bottom");
  var xAxisTriangle = new Plottable.Axes.Numeric(xScaleTriangle, "top");
  var yAxis = new Plottable.Axes.Numeric(yScale, "left");

  var dsSquare = new Plottable.Dataset(data[0], { shape: "square" });
  var dsTriangle = new Plottable.Dataset(data[1], { shape: "triangle" });

  var squareLabel = new Plottable.Components.Label("Square Data Points", 0);
  var triangleLabel = new Plottable.Components.Label("Triangle Data Points", 0);
  var titleLabel = new Plottable.Components.Label("Press 'P' to panzoom", 0);

  var symbolAccessor = function (d, i, ds) {
    if (ds.metadata().shape === "square") {
      return Plottable.SymbolFactories.square();
    } else {
      return Plottable.SymbolFactories.triangleUp();
    }
  };

  var plotSquare = new Plottable.Plots.Scatter()
    .addDataset(dsSquare)
    .x(function (d) { return d.x; }, xScaleSquare)
    .y(function (d) { return d.y - 1; }, yScale)
    .size(20)
    .symbol(symbolAccessor);

  var plotTriangle = new Plottable.Plots.Scatter()
    .addDataset(dsTriangle)
    .x(function (d) { return d.x * 10; }, xScaleTriangle)
    .y(function (d) { return d.y; }, yScale)
    .attr("fill", "#aaaaaa")
    .size(20)
    .symbol(symbolAccessor)
    .deferredRendering(true);

  var plotGroup = new Plottable.Components.Group([plotSquare, plotTriangle]);

  var chart = new Plottable.Components.Table([
      [null, titleLabel],
      [null, triangleLabel],
      [null, xAxisTriangle],
      [yAxis, plotGroup],
      [null, xAxisSquare],
      [null, squareLabel]]);
  chart.renderTo(svg);

  var pointer = new Plottable.Interactions.Pointer();
  var pointerCallback = function(p) {
    plotSquare.entities().forEach(function(entity) {
      entity.selection.attr("fill", "#5279C7");
    });
    var entity = plotSquare.entityNearest(p);
    entity.selection.attr("fill", "red");
  };
  pointer.onPointerMove(pointerCallback);
  pointer.attachTo(plotSquare);

  var pzi = new Plottable.Interactions.PanZoom();
  pzi.xScales([xScaleTriangle, xScaleSquare]);
  pzi.maxDomainExtent(xScaleSquare, 1.5);
  pzi.minDomainExtent(xScaleSquare, .5);
  pzi.attachTo(plotGroup);
  pzi.enabled(false);

  var key = new Plottable.Interactions.Key();
  key.onKeyPress(80, function() {
    pzi.enabled(true);
    pointer.offPointerMove(pointerCallback);
  });
  key.onKeyRelease(80, function() {
    pzi.enabled(false);
    pointer.onPointerMove(pointerCallback);

  });
  key.attachTo(plotGroup);

}
